react-resize-aware-monaco
react-resize-aware-monaco exposes Microsoft's Monaco Editor as a React Component.
Installation
Add react-monaco to your dependencies:
npm install react-resize-aware-monaco --save-dev
Add the following to your Webpack config:
plugins: from: 'node_modules/monaco-editor/min/vs' to: 'vs'
Usage
; const myComponent = <MonacoEditor options={} onChange={} theme={} />
Properties
- Options : Object, default :
{automaticLayout: true}
- It is the second argument that you would have given monaco.editor.create (see playground)
- Please note that your can use
vs-dark-plus-kinda
for the theme. The corresponding theme looks like VS Code's dark-plus.
- onChange : Function, default : noop
- The component's value is uncontrolled but you can use this property to get called back when it changes.
- theme : Object, default : undefined
- It is the second argument that you would have given monaco.editor.defineTheme (see playground) with a key attribute which would have been the first argument to provide to said method.