Neutral Point Measurement

    @uiw/react-textarea-code-editor
    TypeScript icon, indicating that this package has built-in type declarations

    2.1.1 • Public • Published

    React Textarea Code Editor

    Build & Deploy Coverage Status NPM Download jsDelivr CDN Open in unpkg npm bundle size npm version

    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

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

    Usage

    Open in CodeSandbox Open in Github gh-pages

    import CodeEditor from '@uiw/react-textarea-code-editor';
    
    function App() {
      const [code, setCode] = React.useState(
        `function add(a, b) {\n  return a + b;\n}`
      );
      return (
        <CodeEditor
          value={code}
          language="js"
          placeholder="Please enter JS code."
          onChange={(evn) => setCode(evn.target.value)}
          padding={15}
          style={{
            fontSize: 12,
            backgroundColor: "#f5f5f5",
            fontFamily: 'ui-monospace,SFMono-Regular,SF Mono,Consolas,Liberation Mono,Menlo,monospace',
          }}
        />
      );
    }

    Support Nextjs

    Use examples in nextjs. #31

    Open in CodeSandbox

    npm install next-remove-imports
    npm install @uiw/react-textarea-code-editor@v1.4.4
    // next.config.js
    const removeImports = require("next-remove-imports")();
    module.exports = removeImports({
      experimental: { esmExternals: true }
    });
    import React from "react";
    import dynamic from "next/dynamic";
    import "@uiw/react-textarea-code-editor/dist.css";
    
    const CodeEditor = dynamic(
      () => import("@uiw/react-textarea-code-editor").then((mod) => mod.default),
      { ssr: false }
    );
    
    function HomePage() {
      const [code, setCode] = React.useState(
        `function add(a, b) {\n  return a + b;\n}`
      );
      return (
        <div>
          <CodeEditor
            value={code}
            language="js"
            placeholder="Please enter JS code."
            onChange={(evn) => setCode(evn.target.value)}
            padding={15}
            style={{
              fontSize: 12,
              backgroundColor: "#f5f5f5",
              fontFamily:
                "ui-monospace,SFMono-Regular,SF Mono,Consolas,Liberation Mono,Menlo,monospace"
            }}
          />
        </div>
      );
    }
    
    export 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.

    <html data-color-mode="dark">
    document.documentElement.setAttribute('data-color-mode', 'dark')
    document.documentElement.setAttribute('data-color-mode', 'light')

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

    const Demo = () => {
      return (
        <div>
          <div className="w-tc-editor-var"> </div>
          <CodeEditor value={code} />
        </div>
      )
    }

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

    import CodeEditor from '@uiw/react-textarea-code-editor';
    
    function App() {
      return (
        <CodeEditor
          value="function add(a, b) {\n  return a + b;\n}"
          data-color-mode="dark"
        />
      );
    }

    Props

    interface TextareaCodeEditorProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
      prefixCls?: string;
      /**
       * Support dark-mode/night-mode
       */
      ['data-color-mode']?: 'dark' | 'light';
      /**
       * Set what programming language the code belongs to.
       */
      language?: string;
      /**
       * Optional padding for code. Default: `10`.
       */
      padding?: number;
      /**
       * rehypePlugins (Array.<Plugin>, default: `[[rehypePrism, { ignoreMissing: true }]]`)  
       * 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
       */
      rehypePlugins?: PluggableList;
      /**
       * The minimum height of the editor. Default: `16`.
       */
      minHeight?: number;
      onKeyDown?: (event: React.KeyboardEvent<HTMLTextAreaElement>) => void | boolean;
    }

    List of supported languages can be found here

    Demo

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

    Development

    Runs the project in development mode.

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

    production

    Builds the app for production to the build folder.

    npm run build

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

    See Also

    Contributors

    As always, thanks to our amazing contributors!

    Made with github-action-contributors.

    License

    Licensed under the MIT License.

    Install

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

    DownloadsWeekly Downloads

    19,811

    Version

    2.1.1

    License

    MIT

    Unpacked Size

    2.57 MB

    Total Files

    50

    Last publish

    Collaborators

    • uiwjs
    • wcjiang