@codingame/monaco-editor-react ·

Synopsis

This library uses https://github.com/CodinGame/monaco-editor-wrapper

Please refer to this documentation

Installation

1npm install @codingame/monaco-editor-react 

Usage

Simple usage

Here is an example of a simple integration of monaco editor with a React project. You just need to import and render the Editor component:

1import React from "react";
2import ReactDOM from "react-dom";
3
4import Editor from "@codingame/monaco-editor-react";
5
6function App() {
7  const [value, setValue] = useState('// some comment');
8  return (
9   <Editor
10     height="auto"
11     programmingLanguage="javascript"
12     value={value}
13     onChange={setValue}
14   />
15  );
16}
17
18const rootElement = document.getElementById("root");
19ReactDOM.render(<App />, rootElement);

Models management

When you render the MonacoEditor component, there is 2 modes for the model management:

• if the model already exists, it will be reused and not disposed at the end
• if the model doesn't exist, it will be created and disposed at the end

This way, the editor is plug-and-play for simple use cases but it allows you to create your models before, use them in the editor and dispose them when you don't need them anymore

Differences with monaco-react

• This library outputs some dynamic import and rely on webpack to handle them
• The model management is different, either you manage your models by hands or let the editor create and destroy them
• no onValidate: can be done directly with monaco.editor.onDidChangeMarkers
• no theme prop: the theme can be changed using monaco.editor.setTheme
• To get the editor instance, use ref instead of handleEditorDidMount
• There is no useMonaco, you can just use the exported monaco: import { monaco }, Editor from "@codingame/monaco-editor-react";