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: [
    new CopyWebpackPlugin([
      {
        from: 'node_modules/monaco-editor/min/vs',
        to: 'vs'
      }
    ])
  ]
}

Usage

import MonacoEditor from 'react-resize-aware-monaco';
 
const myComponent = props => (
    <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.