Code editor for React

This is a quick post to say, if you’re looking for a JavaScript code editor UI for your application, the react-ace editor has so far proven itself very useful.

Install via yarn add react-ace and you’ll also want yarn add brace for themes, syntax colour.

Now import the dependencies like this

import AceEditor from "react-ace";
import "brace/mode/javascript";
import "brace/mode/python";
import "brace/theme/monokai";
import "brace/theme/github";

This includes two themes, monokai and GitHub for you to try along with two language colourings, in the form of javascript and python.

Now to use the editor, just drop the following code into your application

<AceEditor mode="python" //javascript
  theme="github" //monokai
  width="100%"
  onChange={this.handleOnChange}
  name="AceEditor"
  editorProps={{$blockScrolling: true}}
  value={code}
  fontSize={16}
/>

In this example we’d have an onChange handler to store the changed text in from the editor, the value={code} is the source code that is initially displayed.