There is a well-known web technology based code editor called Monaco Editor that powers VS Code. There are also many ways to integrate it provided by monaco creators. But there were tons of problems with integration of monaco with modern technologies; e.g React.

There also exist solutions for integration with React; e.g this one and this one. But they need some custom webpack (or other module bundler) configuration to make Monaco fully work, which is not the "best" solution for such kind of things like create-react-app - CRA.

With this solution, you don't need any kind of webpack configuration files and it works great both with React apps created by CRA or created by something else.

Installation

yarn add @monaco-editor/react # or npm install @monaco-editor/react

Usage

Example

import React, { useState } from 'react';
import Editor from '@monaco-editor/react';

const examples = { python: '# python example', javascript: '// javascript example' };

function App() {
  const [theme, setTheme] = useState('light');
  const [language, setLanguage] = useState('javascript');
  const [isEditorReady, setIsEditorReady] = useState(false);

  function handleEditorDidMount() {
    setIsEditorReady(true);
  }
  
  function toggleTheme() {
    setTheme(theme === 'light' ? 'dark' : 'light');
  }
  
  function toggleLanguage() {
    setLanguage(language === 'javascript' ? 'python' : 'javascript');
  }

  return (
    <>
      <button onClick={toggleTheme} disabled={!isEditorReady}>Toggle theme</button>
      <button onClick={toggleLanguage} disabled={!isEditorReady}>Toggle language</button>

      <Editor
        height={500} // By default, it fully fits with its parent
        theme={theme}
        language={language}
        value={examples[language]}
        editorDidMount={handleEditorDidMount}
        loading={'Loading...'}
      />
    </>
  );
}

export default App;

Props

Editor

Name	Type	Default	Description
value	string		The editor value
language	enum: ...		All languages that are supported by monaco-editor
editorDidMount	func	noop	Signature: function(getEditorValue: func, monaco: object) => void This function will be called right after monaco editor will be mounted and ready to work. It will get the editor instance as a second argument
theme	enum: 'light' \| 'dark'	'light'	Default themes of monaco
line	number		The line to jump on it
width	union: number \| string	'100%'	The width of the editor wrapper
height	union: number \| string	'100%'	The height of the editor wrapper
loading	union: React element \| string	'Loading...'	The loading screen before the editor will be loaded
options	object	{}	IEditorOptions

DiffEditor

Name	Type	Default	Description
original	string		The original source (left one) value
modified	string		The modified source (right one) value
language	enum: ...		All languages that are supported by monaco-editor
originalLanguage	enum: ...	*language	This prop gives you the opportunity to specify the language of the `original` source separately, otherwise, it will get the value of `language` property. (Possible values are the same as `language`)
modifiedLanguage	enum: ...	*language	This prop gives you the opportunity to specify the language of the `modified` source separately, otherwise, it will get the value of `language` property. (Possible values are the same as `language`)
editorDidMount	func	noop	Signature: function(getOriginalEditorValue: func, getModifiedEditorValue: func, monaco: object) => void This function will be called right after monaco editor will be mounted and ready to work. It will get the editor instance as a third argument
theme	enum: 'light' \| 'dark'	'light'	Default themes of monaco
line	number		The line to jump on it
width	union: number \| string	'100%'	The width of the editor wrapper
height	union: number \| string	'100%'	The height of the editor wrapper
loading	union: React element \| string	'Loading...'	The loading screen before the editor will be loaded
options	object	{}	IDiffEditorOptions

License

MIT