# 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

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

For CommonJS:

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

Additional imports for React and Monaco Editor types:

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

## Basic Usage

```typescript
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.

```typescript { .api }
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](./editor.md)

### Diff Comparison

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

```typescript { .api }
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](./diff-editor.md)

### Monaco Instance Access

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

```typescript { .api }
function useMonaco(): Monaco | null;

type Monaco = typeof monaco;
```

[Monaco Hook](./monaco-hook.md)

### Monaco Loader Configuration

Utilities for configuring Monaco Editor loading behavior and CDN sources.

```typescript { .api }
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](./loader.md)

## Types

### Core Types

```typescript { .api }
// 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:

```typescript { .api }
// 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
}
```