react-monacoeditor

Monaco Editor component for React. demo @jaywcjlove.github.io/react-monacoeditor/

Installation

npm install @uiw/react-monacoeditor --save

Using

import React from 'react';
import MonacoEditor from '@uiw/react-monacoeditor';

<MonacoEditor
  language="html"
  value="<h1>I ♥ react-monacoeditor</h1>"
  options={{
    theme: 'vs-dark',
  }}
/>

Using with Webpack

import React from 'react';
import { render } from 'react-dom';
import MonacoEditor from '@uiw/react-monacoeditor';

const code = `import React, { PureComponent } from 'react';
import MonacoEditor from '@uiw/react-monacoeditor';

export default class App extends PureComponent {
  render() {
    return (
      <MonacoEditor
        language="html"
        value="<h1>I ♥ react-codemirror2</h1>"
        options={{
          selectOnLineNumbers: true,
          roundedSelection: false,
          cursorStyle: 'line',
          automaticLayout: false,
          theme: 'vs-dark',
        }}
      />
    );
  }
}
`;

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      code: '// type your code...',
    }
  }
  editorDidMount(editor, monaco) {
    console.log('editorDidMount', editor, monaco);
    editor.focus();
  }
  onChange(newValue, e) {
    console.log('onChange', newValue, e);
  }
  render() {
    const options = {
      selectOnLineNumbers: true,
      roundedSelection: false,
      readOnly: false,
      cursorStyle: 'line',
      automaticLayout: false,
      theme: 'vs-dark',
    };
    return (
      <MonacoEditor
        height="500px"
        language="javascript"
        editorDidMount={this.editorDidMount.bind(this)}
        onChange={this.onChange.bind(this)}
        value={code}
        options={options}
        scrollbar={{
          // Subtle shadows to the left & top. Defaults to true.
          useShadows: false,
          // Render vertical arrows. Defaults to false.
          verticalHasArrows: true,
          // Render horizontal arrows. Defaults to false.
          horizontalHasArrows: true,
          // Render vertical scrollbar.
          // Accepted values: 'auto', 'visible', 'hidden'.
          // Defaults to 'auto'
          vertical: 'visible',
          // Render horizontal scrollbar.
          // Accepted values: 'auto', 'visible', 'hidden'.
          // Defaults to 'auto'
          horizontal: 'visible',
          verticalScrollbarSize: 17,
          horizontalScrollbarSize: 17,
          arrowSize: 30,
        }}
      />
    );
  }
}

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 vs, vs-dark, hc-black
options refer to Monaco interface IEditorConstructionOptions.
editorDidMount(editor, monaco) an event emitted when the editor has been mounted (similar to componentDidMount of React).
onChange(newValue, event) an event emitted when the content of the current model has changed.

Events & Methods

Refer to Monaco interface IEditor.

Other

react-codemirror: CodeMirror component for React.

License

Licensed under the MIT License.

yaoleyaotouoO/react-monacoeditor