Create Code Editor in React with Syntax Highlighting Feature


Category: React React Form | June 29, 2021
Author:uiwjs
Official Page:Go to website
Last Update:June 29, 2021
License:MIT

Description:

You must be looking to create code editor in React for your application where you want to give your users a flexibility to edit the code on the fly. This library will provide you simple code editor with syntax highlighting feature and simple embeds and forms where your user can submit the edited code.

Basic Features

  • It adds indent on new line automatically.
  • Syntax highlighting feature.
  • User can wrap selected text in parens.

How can I use it?

Step 1: Install the component using NPM.

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

Step 2: Import the component in your file.

import CodeEditor from '@uiw/react-textarea-code-editor';

Step 3: Write the React code to create 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',
      }}
    />
  );
}