DEV Community

loading...
Cover image for Embedding Code Editor In Your React App

Embedding Code Editor In Your React App

ghana7989 profile image ghana ・2 min read

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
Enter fullscreen mode Exit fullscreen mode

And there you get a basic editor1_v9QrT22deOepiZrTRSueKw

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
Enter fullscreen mode Exit fullscreen mode

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 ✌

Discussion (3)

Collapse
nurgasemetey profile image
nurgasemetey

What about auto formatting?

Collapse
ghana7989 profile image
ghana Author
var beautify = ace.require("ace/ext/beautify"); // get reference to extension
var editor = ace.edit("editor"); // get reference to editor
beautify.beautify(editor.session);
Enter fullscreen mode Exit fullscreen mode

I am not sure about formatting, but hope the above solution works

Collapse
rishabsharma profile image
Rishab Sharma

Thanks a lot dude, it helped me a lot

Forem Open with the Forem app