@monaco-editor/react

What is @monaco-editor/react?

@monaco-editor/react is a React component for integrating the Monaco Editor, which is the code editor that powers Visual Studio Code, into React applications. It provides a simple way to embed a powerful code editor with syntax highlighting, IntelliSense, and other advanced features.

What are @monaco-editor/react's main functionalities?

Basic Usage

This code demonstrates how to use the @monaco-editor/react package to embed a basic Monaco Editor instance in a React application. The editor is set to use JavaScript language and the 'vs-dark' theme.

import React from 'react';
import { MonacoEditor } from '@monaco-editor/react';

function App() {
  return (
    <div>
      <MonacoEditor height="90vh" language="javascript" theme="vs-dark" />
    </div>
  );
}

export default App;

Customizing Editor Options

This example shows how to customize the editor options. The options object allows you to configure various aspects of the editor, such as making it read-only, changing the cursor style, and enabling automatic layout.

import React from 'react';
import { MonacoEditor } from '@monaco-editor/react';

function App() {
  const options = {
    selectOnLineNumbers: true,
    roundedSelection: false,
    readOnly: true,
    cursorStyle: 'line',
    automaticLayout: true
  };

  return (
    <div>
      <MonacoEditor height="90vh" language="javascript" theme="vs-dark" options={options} />
    </div>
  );
}

export default App;

Handling Editor Events

This example demonstrates how to handle editor events, such as content changes. The onChange prop is used to pass a callback function that will be called whenever the editor's content changes.

import React from 'react';
import { MonacoEditor } from '@monaco-editor/react';

function App() {
  const handleEditorChange = (value, event) => {
    console.log('Editor content changed:', value);
  };

  return (
    <div>
      <MonacoEditor height="90vh" language="javascript" theme="vs-dark" onChange={handleEditorChange} />
    </div>
  );
}

export default App;

Other packages similar to @monaco-editor/react

react-ace

react-ace is a React component for the Ace editor, another popular code editor. It offers similar features like syntax highlighting, themes, and various editor options. However, Monaco Editor is generally considered more powerful and feature-rich, especially for larger projects.

react-codemirror2

react-codemirror2 is a React component for the CodeMirror editor. It provides a highly customizable code editor with support for many languages and themes. While CodeMirror is lightweight and fast, Monaco Editor offers more advanced features like IntelliSense and better integration with TypeScript.

react-simple-code-editor

react-simple-code-editor is a lightweight code editor component for React. It is built on top of Prism.js for syntax highlighting. While it is simpler and easier to use, it lacks many of the advanced features found in Monaco Editor, such as IntelliSense and comprehensive language support.

README

monaco-react

Monaco Editor for React

Synopsis

Monaco editor wrapper for easy/one-line integration with React applications without need of webpack (or other module bundler) configuration files.

Motivation

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 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 with React apps created by CRA or created by something else.

Installation

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

Demo

Usage

Example (codesandbox)

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;

MonacoEditor instance

The second argument of editorDidMount is the instance of the editor. So, you can use it to get the full control on the editor if you need it.

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

Changelog

1.0.5

July 19, 2019

• Add a possibility to interact with Editor before it is mounted