or run

npx @tessl/cli init

Version

Tile

Overview

Evals

Files

docs

diff-editor.md editor.md index.md loader.md monaco-hook.md

tile.json

tessl/npm-monaco-editor--react

Monaco Editor for React - use the monaco-editor in any React application without needing to use webpack (or rollup/parcel/etc) configuration files / plugins

Workspace: tessl
Visibility: Public
Created: 3 months ago
Last updated: 3 months ago
Describes: pkg:npm/@monaco-editor/react@4.7.x

To install, run

npx @tessl/cli install tessl/npm-monaco-editor--react@4.7.0

Monaco Editor for React

Monaco Editor for React provides React components that wrap the Monaco Editor (the same editor that powers VS Code) for easy integration into React applications. The library handles Monaco Editor loading and setup automatically, requiring no webpack configuration or plugins.

Package Information

Package Name: @monaco-editor/react
Package Type: npm
Language: TypeScript
Installation: npm install @monaco-editor/react
Peer Dependencies: monaco-editor, react (>=16.8.0), react-dom (>=16.8.0)

Core Imports

import Editor, { DiffEditor, useMonaco, loader } from "@monaco-editor/react";
import type { Monaco, Theme } from "@monaco-editor/react";

For CommonJS:

const Editor = require("@monaco-editor/react").default;
const { DiffEditor, useMonaco, loader } = require("@monaco-editor/react");

Additional imports for React and Monaco Editor types:

import React from "react";
import type { editor } from "monaco-editor";

Basic Usage

import React from "react";
import Editor from "@monaco-editor/react";

function CodeEditor() {
  const handleEditorDidMount = (editor, monaco) => {
    console.log("onMount: the editor instance:", editor);
    console.log("onMount: the monaco instance:", monaco);
  };

  const handleEditorChange = (value, event) => {
    console.log("onChange: current model value:", value);
  };

  return (
    <Editor
      height="90vh"
      defaultLanguage="javascript"
      defaultValue="// Welcome to Monaco Editor!"
      onMount={handleEditorDidMount}
      onChange={handleEditorChange}
      theme="vs-dark"
    />
  );
}

Architecture

Monaco Editor for React is structured around several key components:

Editor Component: Primary Monaco Editor wrapper providing full editing capabilities
DiffEditor Component: Side-by-side code comparison editor for showing differences
Monaco Loader: Handles Monaco Editor initialization and loading (@monaco-editor/loader)
useMonaco Hook: React hook for accessing the Monaco instance across components
Type Safety: Complete TypeScript definitions for all Monaco Editor APIs

The library uses a lazy loading approach where Monaco Editor is loaded on-demand, improving initial page load times.

Capabilities

Code Editing

Primary Monaco Editor component with syntax highlighting, IntelliSense, and advanced editing features for any programming language.

declare const Editor: React.ComponentType<EditorProps>;

interface EditorProps {
  defaultValue?: string;
  value?: string;
  defaultLanguage?: string;
  language?: string;
  theme?: Theme | string;
  options?: editor.IStandaloneEditorConstructionOptions;
  onMount?: OnMount;
  onChange?: OnChange;
  width?: number | string;
  height?: number | string;
}

type OnMount = (editor: editor.IStandaloneCodeEditor, monaco: Monaco) => void;
type OnChange = (value: string | undefined, ev: editor.IModelContentChangedEvent) => void;
type Theme = 'vs-dark' | 'light';

Code Editor

Diff Comparison

Side-by-side code comparison editor for visualizing differences between two versions of code.

declare const DiffEditor: React.ComponentType<DiffEditorProps>;

interface DiffEditorProps {
  original?: string;
  modified?: string;
  language?: string;
  originalLanguage?: string;
  modifiedLanguage?: string;
  theme?: Theme | string;
  options?: editor.IDiffEditorConstructionOptions;
  onMount?: DiffOnMount;
  width?: number | string;
  height?: number | string;
}

type DiffOnMount = (editor: editor.IStandaloneDiffEditor, monaco: Monaco) => void;

Diff Editor

Monaco Instance Access

React hook for accessing the Monaco Editor instance and its APIs across components.

function useMonaco(): Monaco | null;

type Monaco = typeof monaco;

Monaco Hook

Monaco Loader Configuration

Utilities for configuring Monaco Editor loading behavior and CDN sources.

declare const loader: {
  init(): Promise<Monaco>;
  config(options: LoaderConfig): void;
  __getMonacoInstance(): Monaco | null;
};

interface LoaderConfig {
  paths?: {
    vs?: string;
  };
  "vs/nls"?: {
    availableLanguages?: Record<string, string>;
  };
  monaco?: Monaco;
}

Loader Configuration

Types

Core Types

// Monaco and React types
type Monaco = typeof monaco;
type Theme = 'vs-dark' | 'light';
type ReactNode = React.ReactNode;

// Event handler types
type OnMount = (editor: editor.IStandaloneCodeEditor, monaco: Monaco) => void;
type BeforeMount = (monaco: Monaco) => void;
type OnChange = (value: string | undefined, ev: editor.IModelContentChangedEvent) => void;
type OnValidate = (markers: editor.IMarker[]) => void;

// Diff editor types
type MonacoDiffEditor = editor.IStandaloneDiffEditor;
type DiffOnMount = (editor: MonacoDiffEditor, monaco: Monaco) => void;
type DiffBeforeMount = (monaco: Monaco) => void;

Monaco Editor Types

All Monaco Editor types are re-exported from the monaco-editor package:

// Monaco Editor interfaces (from monaco-editor package)
interface IStandaloneCodeEditor {
  // Full Monaco Editor API
}

interface IStandaloneDiffEditor {
  // Full Monaco Diff Editor API  
}

interface IStandaloneEditorConstructionOptions {
  // Editor configuration options
}

interface IDiffEditorConstructionOptions {
  // Diff editor configuration options
}