Monaco Editor for React

by React

react-monaco-editor

Monaco Editor for React.

Examples

To build the examples locally, run:

yarn
cd example
yarn
yarn start

Then open http://localhost:8886 in a browser.

Installation

yarn add react-monaco-editor

Using with Webpack

import React from 'react';
import { render } from 'react-dom';
import MonacoEditor from 'react-monaco-editor';

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      code: '// type your code...',
    }
  }
  editorDidMount(editor, monaco) {
    console.log('editorDidMount', editor);
    editor.focus();
  }
  onChange(newValue, e) {
    console.log('onChange', newValue, e);
  }
  render() {
    const code = this.state.code;
    const options = {
      selectOnLineNumbers: true
    };
    return (
      <MonacoEditor
        width="800"
        height="600"
        language="javascript"
        theme="vs-dark"
        value={code}
        options={options}
        onChange={::this.onChange}
        editorDidMount={::this.editorDidMount}
      />
    );
  }
}

render(
  <App />,
  document.getElementById('root')
);

Add the Monaco Webpack plugin monaco-editor-webpack-plugin to your webpack.config.js:

const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin');
module.exports = {
  plugins: [
    new MonacoWebpackPlugin()
  ]
};

Properties

If you specify value property, the component behaves in controlled mode.
Otherwise, it behaves in uncontrolled mode.

  • width width of editor. Defaults to 100%.
  • height height of editor. Defaults to 100%.
  • value value of the auto created model in the editor.
  • defaultValue the initial value of the auto created model in the editor.
  • language the initial language of the auto created model in the editor.
  • theme the theme of the editor
  • options refer to Monaco interface IEditorConstructionOptions.
  • onChange(newValue, event) an event emitted when the content of the current model has changed.
  • editorWillMount(monaco) an event emitted before the editor mounted (similar to componentWillMount of React).
  • editorDidMount(editor, monaco) an event emitted when the editor has been mounted (similar to componentDidMount of React).
  • context optional, allow to pass a different context then the global window onto which the monaco instance will be loaded. Useful if you want to load the editor in an iframe.

GitHub