React Textarea Code Editor

A simple code editor with syntax highlighting. This library aims to provide a simple code editor with syntax highlighting support without any of the extra features, perfect for simple embeds and forms where users can submit code.

Features:

• 🌒 Support dark-mode/night-mode @v2.
• ☕️ Automatic syntax highlighting.
• 🐲 Automatic indent on new lines.
• 🩲 Indent line or selected text by pressing tab key, with customizable indentation.
• 🌸 Wrap selected text in parens, [], (), <>, {}, "", '', "", ``
• 💡 Support next.js, Use examples in next.js.

Install

1$ npm i @uiw/react-textarea-code-editor

Demo & Document

https://uiwjs.github.io/react-textarea-code-editor/

Usage

1import React, { useState } from "react";
2import CodeEditor from '@uiw/react-textarea-code-editor';
3
4export default function App() {
5  const [code, setCode] = useState(
6    `function add(a, b) {\n  return a + b;\n}`
7  );
8  return (
9    <CodeEditor
10      value={code}
11      language="js"
12      placeholder="Please enter JS code."
13      onChange={(evn) => setCode(evn.target.value)}
14      padding={15}
15      style={{
16        backgroundColor: "#f5f5f5",
17        fontFamily: 'ui-monospace,SFMono-Regular,SF Mono,Consolas,Liberation Mono,Menlo,monospace',
18      }}
19    />
20  );
21}

Highlight line or character

List of rehype plugins to use.

1import CodeEditor from '@uiw/react-textarea-code-editor';
2import rehypePrism from "rehype-prism-plus";
3import rehypeRewrite from "rehype-rewrite";
4import "./styles.css";
5
6function App() {
7  const [code, setCode] = React.useState(
8    `function add(a, b) {\n  return a + b;\n}`
9  );
10  return (
11    <CodeEditor
12      value={code}
13      language="js"
14      placeholder="Please enter JS code."
15      onChange={(evn) => setCode(evn.target.value)}
16      padding={15}
17      rehypePlugins={[
18        [rehypePrism, { ignoreMissing: true }],
19        [
20          rehypeRewrite,
21          {
22            rewrite: (node, index, parent) => {
23              if (node.properties?.className?.includes("code-line")) {
24                if (index === 0 && node.properties?.className) {
25                  node.properties.className.push("demo01");
26                  // console.log("~~~", index, node.properties?.className);
27                }
28              }
29              if (node.type === "text" && node.value === "return" && parent.children.length === 1) {
30                parent.properties.className.push("demo123");
31              }
32            }
33          }
34        ]
35      ]}
36      style={{
37        fontSize: 12,
38        backgroundColor: "#f5f5f5",
39        fontFamily: 'ui-monospace,SFMono-Regular,SF Mono,Consolas,Liberation Mono,Menlo,monospace',
40      }}
41    />
42  );
43}

Remove Code Highlight

The following example can help you exclude code highlighting code from being included in the bundle. @uiw/react-textarea-code-editor/nohighlight component does not contain the rehype-prism-plus code highlighting package.

1import React, { useState } from "react";
2import CodeEditor from '@uiw/react-textarea-code-editor/nohighlight';
3
4export default function App() {
5  const [code, setCode] = useState(
6    `function add(a, b) {\n  return a + b;\n}`
7  );
8  return (
9    <CodeEditor
10      value={code}
11      language="js"
12      placeholder="Please enter JS code."
13      onChange={(evn) => setCode(evn.target.value)}
14      padding={15}
15      style={{
16        backgroundColor: "#f5f5f5",
17        fontFamily: 'ui-monospace,SFMono-Regular,SF Mono,Consolas,Liberation Mono,Menlo,monospace',
18      }}
19    />
20  );
21}

Show LineNumbers

1import rehypePrism from 'rehype-prism-plus';
2import React, { useState } from "react";
3import CodeEditor from '@uiw/react-textarea-code-editor';
4
5export default function App() {
6  const [code, setCode] = useState(
7    `function add(a, b) {\n  return a + b;\n}`
8  );
9  return (
10    <CodeEditor
11      value={code}
12      language="js"
13      placeholder="Please enter JS code."
14      onChange={(evn) => setCode(evn.target.value)}
15      rehypePlugins={[
16        [rehypePrism, { ignoreMissing: true, showLineNumbers: true }]
17      ]}
18      style={{
19        backgroundColor: "#f5f5f5",
20        fontFamily: 'ui-monospace,SFMono-Regular,SF Mono,Consolas,Liberation Mono,Menlo,monospace',
21      }}
22    />
23  );
24}

Support Nextjs

Use examples in nextjs. #31

1npm install next-remove-imports
2npm install @uiw/react-textarea-code-editor@v1.4.4

1// next.config.js
2const removeImports = require("next-remove-imports")();
3module.exports = removeImports({
4  experimental: { esmExternals: true }
5});

1import React from "react";
2import dynamic from "next/dynamic";
3import "@uiw/react-textarea-code-editor/dist.css";
4
5const CodeEditor = dynamic(
6  () => import("@uiw/react-textarea-code-editor").then((mod) => mod.default),
7  { ssr: false }
8);
9
10function HomePage() {
11  const [code, setCode] = React.useState(
12    `function add(a, b) {\n  return a + b;\n}`
13  );
14  return (
15    <div>
16      <CodeEditor
17        value={code}
18        language="js"
19        placeholder="Please enter JS code."
20        onChange={(evn) => setCode(evn.target.value)}
21        padding={15}
22        style={{
23          fontSize: 12,
24          backgroundColor: "#f5f5f5",
25          fontFamily:
26            "ui-monospace,SFMono-Regular,SF Mono,Consolas,Liberation Mono,Menlo,monospace"
27        }}
28      />
29    </div>
30  );
31}
32
33export default HomePage;

Support dark-mode/night-mode

By default, the dark-mode is automatically switched according to the system. If you need to switch manually, just set the data-color-mode="dark" parameter for html Element.

1<html data-color-mode="dark">

1document.documentElement.setAttribute('data-color-mode', 'dark')
2document.documentElement.setAttribute('data-color-mode', 'light')

Inherit custom color variables by adding .w-tc-editor-var selector.

1const Demo = () => {
2  return (
3    <div>
4      <div className="w-tc-editor-var"> </div>
5      <CodeEditor value={code} />
6    </div>
7  )
8}

Set (data-color-mode="dark") dark theme.

1import CodeEditor from '@uiw/react-textarea-code-editor';
2
3function App() {
4  return (
5    <CodeEditor
6      value="function add(a, b) {\n  return a + b;\n}"
7      data-color-mode="dark"
8    />
9  );
10}

Props

1interface TextareaCodeEditorProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
2  prefixCls?: string;
3  /**
4   * Support dark-mode/night-mode
5   */
6  ['data-color-mode']?: 'dark' | 'light';
7  /**
8   * Set what programming language the code belongs to.
9   */
10  language?: string;
11  /**
12   * Optional padding for code. Default: `10`.
13   */
14  padding?: number;
15  /**
16   * rehypePlugins (Array.<Plugin>, default: `[[rehypePrism, { ignoreMissing: true }]]`)  
17   * List of [rehype plugins](https://github.com/rehypejs/rehype/blob/main/doc/plugins.md#list-of-plugins) to use. See the next section for examples on how to pass options
18   */
19  rehypePlugins?: PluggableList;
20  /**
21   * The minimum height of the editor. Default: `16`.
22   */
23  minHeight?: number;
24  onKeyDown?: (event: React.KeyboardEvent<HTMLTextAreaElement>) => void | boolean;
25  /**
26   * The number of spaces for indentation when pressing tab key. Default: `2`.
27   */
28  indentWidth?: number
29}

List of supported languages can be found here

Development

Runs the project in development mode.

1# Step 1, run first, listen to the component compile and output the .js file
2# listen for compilation output type .d.ts file
3npm run watch
4# Step 2, development mode, listen to compile preview website instance
5npm run start

production

Builds the app for production to the build folder.

1npm run build

The build is minified and the filenames include the hashes. Your app is ready to be deployed!

See Also

• @uiw/react-codemirror: CodeMirror component for React.
• @uiw/react-md-editor: A simple markdown editor with preview, implemented with React.js and TypeScript.
• @uiw/react-monacoeditor: Monaco Editor component for React.
• @uiw/react-markdown-editor: A markdown editor with preview, implemented with React.js and TypeScript.
• @uiw/react-markdown-preview: React component preview markdown text in web browser.

Contributors

As always, thanks to our amazing contributors!

Made with github-action-contributors.

License

Licensed under the MIT License.