CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-react-monaco-editor

React components for integrating Microsoft's Monaco Editor into React applications

—

Pending
Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

SecuritybySnyk

Pending

The risk profile of this skill

Overview
Eval results
Files

React Monaco Editor

React Monaco Editor provides React components for integrating Microsoft's Monaco Editor (the editor that powers VS Code) into React applications. It offers both a standard MonacoEditor component and a MonacoDiffEditor component for comparing code differences.

Package Information

  • Package Name: react-monaco-editor
  • Package Type: npm
  • Language: TypeScript
  • Installation: npm install react-monaco-editor monaco-editor

Core Imports

import MonacoEditor, { MonacoDiffEditor, monaco } from "react-monaco-editor";

For named imports:

import { MonacoEditor, MonacoDiffEditor, monaco } from "react-monaco-editor";

CommonJS:

const MonacoEditor = require("react-monaco-editor").default;
const { MonacoDiffEditor, monaco } = require("react-monaco-editor");

Basic Usage

import React, { useState } from "react";
import MonacoEditor from "react-monaco-editor";

function CodeEditor() {
  const [code, setCode] = useState('// type your code...');

  const options = {
    selectOnLineNumbers: true,
    roundedSelection: false,
    readOnly: false,
    cursorStyle: 'line' as const,
    automaticLayout: false,
  };

  return (
    <MonacoEditor
      width="800"
      height="600"
      language="javascript"
      theme="vs-dark"
      value={code}
      options={options}
      onChange={(newValue) => setCode(newValue)}
      editorDidMount={(editor, monaco) => {
        console.log('editorDidMount', editor);
        editor.focus();
      }}
    />
  );
}

Architecture

React Monaco Editor is built around several key components:

  • MonacoEditor Component: Main React wrapper for Monaco Editor providing controlled/uncontrolled modes
  • MonacoDiffEditor Component: React wrapper for Monaco Diff Editor for side-by-side code comparison
  • Monaco API Re-export: Direct access to Monaco Editor APIs and types
  • TypeScript Integration: Full type definitions with Monaco Editor type integration
  • Lifecycle Management: React hooks-based lifecycle with proper cleanup and event handling
  • Forward Refs: Direct access to Monaco editor instances via React refs

Capabilities

Monaco Editor

Main code editor component with full Monaco Editor functionality including syntax highlighting, IntelliSense, and customizable themes.

declare const MonacoEditor: React.ForwardRefExoticComponent<
  MonacoEditorProps & React.RefAttributes<MonacoEditorHandle>
>;

interface MonacoEditorProps extends MonacoEditorBaseProps {
  value?: string | null;
  options?: monaco.editor.IStandaloneEditorConstructionOptions;
  overrideServices?: monaco.editor.IEditorOverrideServices;
  editorWillMount?: EditorWillMount;
  editorDidMount?: EditorDidMount;
  editorWillUnmount?: EditorWillUnmount;
  onChange?: ChangeHandler;
  uri?: (monaco: typeof monaco) => monaco.Uri;
}

interface MonacoEditorHandle {
  editor: monaco.editor.IStandaloneCodeEditor;
}

Monaco Editor

Monaco Diff Editor

Diff editor component for side-by-side code comparison with change highlighting and merge capabilities.

declare const MonacoDiffEditor: React.ForwardRefExoticComponent<
  MonacoDiffEditorProps & React.RefAttributes<MonacoDiffEditorHandle>
>;

interface MonacoDiffEditorProps extends MonacoEditorBaseProps {
  original?: string;
  value?: string;
  options?: monaco.editor.IDiffEditorConstructionOptions;
  overrideServices?: monaco.editor.IEditorOverrideServices;
  editorWillMount?: DiffEditorWillMount;
  editorDidMount?: DiffEditorDidMount;
  editorWillUnmount?: DiffEditorWillUnmount;
  onChange?: DiffChangeHandler;
  originalUri?: (monaco: typeof monaco) => monaco.Uri;
  modifiedUri?: (monaco: typeof monaco) => monaco.Uri;
}

interface MonacoDiffEditorHandle {
  editor: monaco.editor.IStandaloneDiffEditor;
}

Monaco Diff Editor

Shared Types

interface MonacoEditorBaseProps {
  /** Width of editor. Defaults to 100%. */
  width?: string | number;
  /** Height of editor. Defaults to 100%. */
  height?: string | number;
  /** The initial value of the auto created model in the editor. */
  defaultValue?: string;
  /** The initial language of the auto created model in the editor. Defaults to 'javascript'. */
  language?: string;
  /** Theme to be used for rendering. */
  theme?: Theme | (string & NonNullable<unknown>) | null;
  /** Optional string classname to append to the editor. */
  className?: string | null;
}

type Theme = "vs" | "vs-dark" | "hc-black";

type EditorConstructionOptions = NonNullable<
  Parameters<typeof monaco.editor.create>[1]
>;

type EditorWillMount = (
  monaco: typeof monaco
) => void | EditorConstructionOptions;

type EditorDidMount = (
  editor: monaco.editor.IStandaloneCodeEditor,
  monaco: typeof monaco
) => void;

type EditorWillUnmount = (
  editor: monaco.editor.IStandaloneCodeEditor,
  monaco: typeof monaco
) => void | EditorConstructionOptions;

type ChangeHandler = (
  value: string,
  event: monaco.editor.IModelContentChangedEvent
) => void;

type DiffEditorWillMount = (
  monaco: typeof monaco
) => void | monaco.editor.IStandaloneEditorConstructionOptions;

type DiffEditorDidMount = (
  editor: monaco.editor.IStandaloneDiffEditor,
  monaco: typeof monaco
) => void;

type DiffEditorWillUnmount = (
  editor: monaco.editor.IStandaloneDiffEditor,
  monaco: typeof monaco
) => void;

type DiffChangeHandler = ChangeHandler;

Monaco API Access

The package re-exports the Monaco Editor API for direct access to Monaco functionality:

import * as monaco from "monaco-editor/esm/vs/editor/editor.api";
export { monaco };

This provides access to Monaco's language services, themes, editor APIs, and all other Monaco Editor functionality.

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/react-monaco-editor@0.59.x
Publish Source
CLI
Badge
tessl/npm-react-monaco-editor badge