Skip to content
Monaco Editor component for React.
Branch: master
Clone or download
Latest commit e57d083 Aug 28, 2018
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
example Update example. Aug 28, 2018
public Add file. Jul 24, 2018
src Add file. Jul 24, 2018
.babelrc Add file. Jul 24, 2018
.gitignore Add file. Jul 24, 2018
.kktrc.js Update example. Aug 28, 2018
.npmignore Add npm ignore file. Jul 24, 2018
README.md Update README.md Aug 16, 2018
package-lock.json Update dependencies Aug 28, 2018
package.json released v1.0.6 Aug 28, 2018
react-monacoeditor.png Add file. Jul 24, 2018

README.md

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 '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 'react-monacoeditor';

const code = `import React, { PureComponent } from 'react';
import MonacoEditor from '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

License

Licensed under the MIT License.

You can’t perform that action at this time.