@codingame/monaco-editor-react ·   

Synopsis

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

Please refer to this documentation

$3

``bash
npm install @codingame/monaco-editor-react
`

$3

#### 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:

`typescript
import React from "react";
import ReactDOM from "react-dom";

import Editor from "@codingame/monaco-editor-react";

function App() {
const [value, setValue] = useState('// some comment');
return (
height="auto"
programmingLanguage="javascript"
value={value}
onChange={setValue}
/>
);
}

const rootElement = document.getElementById("root");
ReactDOM.render(, 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

$3


- 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";`