This library uses https://github.com/CodinGame/monaco-editor-wrapper
Please refer to this documentation
npm install @codingame/monaco-editor-react
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:
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 (
<Editor
height="auto"
programmingLanguage="javascript"
value={value}
onChange={setValue}
/>
);
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
When you render the MonacoEditor component, there is 2 modes for the model management:
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
import
and rely on webpack to handle themonValidate
: can be done directly with monaco.editor.onDidChangeMarkersmonaco.editor.setTheme
ref
instead of handleEditorDidMount
useMonaco
, you can just use the exported monaco
: import { monaco }, Editor from "@codingame/monaco-editor-react";