Embedding Code Editor In Your React App

#react #components #reactace

Welcome

Ever wanted to insert a beautiful code editor in your react app? Answer is probably yes. So, let's get started.

Step 1 - Installing dependencies

npm i react-ace
or if you are using yarn
yarn add react-ace

Step 2 - Creating a Component

Now, we should create a react component that renders the code editor. Here, I am going to use Functional Components (recommended)



import AceEditor from 'react-ace'

function App() {
    return <AceEditor />
}

export default App

And there you get a basic editor

Step 3 - Styling And Configuring it.

For now I am assuming you need this editor for editing JavaScript code.



import {useState} from 'react'
import AceEditor from 'react-ace'

// import mode-<language> , this imports the style and colors for the selected language.
import 'ace-builds/src-noconflict/mode-javascript'
// there are many themes to import, I liked monokai.
import 'ace-builds/src-noconflict/theme-monokai'
// this is an optional import just improved the interaction.
import 'ace-builds/src-noconflict/ext-language_tools'
import 'ace-builds/src-noconflict/ext-beautify'

function App() {
    const [code, setCode] = useState(`function hello() {
  console.log("Hello World!");
}`)

    return (
        <AceEditor
            style={{
                height: '100vh',
                width: '100%',
            }}
            placeholder='Start Coding'
            mode='javascript'
            theme='monokai'
            name='basic-code-editor'
            onChange={currentCode => setCode(currentCode)}
            fontSize={18}
            showPrintMargin={true}
            showGutter={true}
            highlightActiveLine={true}
            value={code}
            setOptions={{
                enableBasicAutocompletion: true,
                enableLiveAutocompletion: true,
                enableSnippets: true,
                showLineNumbers: true,
                tabSize: 4,
            }}
        />
    )
}

export default App

You can explore further here -> React Ace Docs

Conclusion

This is a basic setup, for further modifications you can check the above provided link, you can generate the code interactively here

Peace ✌

Top comments (4)

nurgasemetey • May 27 '21

What about auto formatting?

Pavan Chindukuri • May 29 '21

var beautify = ace.require("ace/ext/beautify"); // get reference to extension
var editor = ace.edit("editor"); // get reference to editor
beautify.beautify(editor.session);