Monaco Editor for React Applications

0.59.0 · active · verified Tue Apr 21

react-monaco-editor provides a React component wrapper for the Monaco Editor, which is the code editor that powers VS Code. Currently stable at version 0.59.0, the package generally follows the updates of its `monaco-editor` peer dependency, releasing updates to ensure compatibility and add minor features or fixes. Its release cadence is moderate, with several patch and minor versions released per quarter, often driven by dependency updates or small feature enhancements. This library simplifies the integration of a powerful, feature-rich code editor into React applications, abstracting away much of the complex setup required by the standalone Monaco Editor, particularly concerning Webpack configuration and instance management. It exposes a declarative API through props, making it straightforward to embed a full-featured code editing experience.

Common errors

Warnings

Install

Imports

Quickstart

This quickstart renders a full-height, interactive Monaco editor instance within a React component. It demonstrates initial value setting, language configuration, theme selection, and how to handle `onChange` and `editorDidMount` events, including adding a custom editor command. It is designed to be directly runnable within a modern React setup using `createRoot`.

import React from 'react';
import { createRoot } from "react-dom/client";
import MonacoEditor from 'react-monaco-editor';

interface AppState {
  code: string;
}

class App extends React.Component<{}, AppState> {
  constructor(props: {}) {
    super(props);
    this.state = {
      code: `function helloWorld() {
  console.log("Hello, Monaco!");
  // You can customize language, theme, and options.
  const now = new Date();
  return \`Current time: \${now.toLocaleTimeString()}\`;
}`,
    };
    this.onChange = this.onChange.bind(this);
    this.editorDidMount = this.editorDidMount.bind(this);
  }

  editorDidMount(editor: any, monaco: any) {
    console.log('editorDidMount instance:', editor);
    console.log('monaco global instance:', monaco);
    editor.focus();
    // Example: add a new command (Ctrl+Enter)
    editor.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.Enter, () => {
      alert('Ctrl+Enter pressed!');
    });
  }

  onChange(newValue: string, event: any) {
    console.log('Editor content changed:', newValue);
    this.setState({ code: newValue });
  }

  render() {
    const { code } = this.state;
    const options = {
      selectOnLineNumbers: true,
      automaticLayout: true, // Essential for responsive editors
      scrollBeyondLastLine: false,
      minimap: {
        enabled: true,
      },
      fontSize: 14,
    };
    return (
      <div style={{ height: 'calc(100vh - 40px)', width: '100%', padding: '20px' }}>
        <h2>Interactive Code Editor (TypeScript)</h2>
        <MonacoEditor
          width="100%"
          height="100%"
          language="typescript"
          theme="vs-dark"
          value={code}
          options={options}
          onChange={this.onChange}
          editorDidMount={this.editorDidMount}
        />
      </div>
    );
  }
}

const container = document.getElementById('root');
if (container) {
  const root = createRoot(container);
  root.render(<App />);
} else {
  console.error("Failed to find the root element to render the app.");
}

view raw JSON →