@uiw/react-monacoeditor
    TypeScript icon, indicating that this package has built-in type declarations

    3.4.5 • Public • Published

    react-monacoeditor

    Downloads Open in unpkg npm version

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

    Installation

    npm install @uiw/react-monacoeditor --save

    Using

    Open in CodeSandbox

    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',
          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,
          },
        };
        return (
          <MonacoEditor
            height="500px"
            language="javascript"
            editorDidMount={this.editorDidMount.bind(this)}
            onChange={this.onChange.bind(this)}
            value={code}
            options={options}
          />
        );
      }
    }
    
    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.
    • autoComplete?: (model: monaco.editor.ITextModel, position: monaco.Position) => languages.CompletionItem[]; User provided extension function provider for auto-complete. #47

    Events & Methods

    Refer to Monaco interface IEditor.

    Related

    License

    Licensed under the MIT License.

    Install

    npm i @uiw/react-monacoeditor

    DownloadsWeekly Downloads

    438

    Version

    3.4.5

    License

    MIT

    Unpacked Size

    44.2 kB

    Total Files

    11

    Last publish

    Collaborators

    • wcjiang