or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

extensions.mdhook-api.mdindex.mdmain-component.mdthemes.mdutilities.md
tile.json

tessl/npm-uiw--react-codemirror

React wrapper component for CodeMirror 6 editor with TypeScript support and extensible theming system

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/@uiw/react-codemirror@4.25.x

To install, run

npx @tessl/cli install tessl/npm-uiw--react-codemirror@4.25.0

index.mddocs/

React CodeMirror

React CodeMirror is a comprehensive React wrapper for CodeMirror 6, providing a modern, type-safe interface for integrating advanced code editing capabilities into React applications. It offers both a main component and hook-based API with full TypeScript support, extensible theming, and seamless CodeMirror 6 integration.

Package Information

  • Package Name: @uiw/react-codemirror
  • Package Type: npm
  • Language: TypeScript
  • Installation: npm install @uiw/react-codemirror

Core Imports

import CodeMirror from "@uiw/react-codemirror";
import { useCodeMirror } from "@uiw/react-codemirror";

For CommonJS:

const CodeMirror = require("@uiw/react-codemirror");
const { useCodeMirror } = require("@uiw/react-codemirror");

Basic Usage

import React from "react";
import CodeMirror from "@uiw/react-codemirror";
import { javascript } from "@codemirror/lang-javascript";

function App() {
  const [value, setValue] = React.useState("console.log('hello world!');");
  
  const onChange = React.useCallback((val, viewUpdate) => {
    console.log('val:', val);
    setValue(val);
  }, []);

  return (
    <CodeMirror
      value={value}
      height="200px"
      extensions={[javascript({ jsx: true })]}
      onChange={onChange}
    />
  );
}

Architecture

React CodeMirror is built around several key components:

  • Main Component: CodeMirror component providing declarative React interface
  • Hook API: useCodeMirror hook for advanced integration and custom containers
  • Extension System: Full CodeMirror 6 extension support with default configurations
  • Theme Engine: Built-in light/dark themes plus custom theme creation
  • State Management: Automatic synchronization between React state and CodeMirror state
  • Event System: Comprehensive event handling for changes, updates, and editor lifecycle

Capabilities

Main Component

Primary React component that renders a CodeMirror 6 editor with full configuration support. Handles all common use cases with declarative props.

declare const ReactCodeMirror: React.ForwardRefExoticComponent<
  ReactCodeMirrorProps & React.RefAttributes<ReactCodeMirrorRef>
>;

export default ReactCodeMirror;

interface ReactCodeMirrorProps
  extends Omit<EditorStateConfig, 'doc' | 'extensions'>,
    Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange' | 'placeholder'> {
  value?: string;
  height?: string;
  minHeight?: string;
  maxHeight?: string;
  width?: string;
  minWidth?: string;
  maxWidth?: string;
  autoFocus?: boolean;
  placeholder?: string | HTMLElement;
  theme?: 'light' | 'dark' | 'none' | Extension;
  basicSetup?: boolean | BasicSetupOptions;
  editable?: boolean;
  readOnly?: boolean;
  indentWithTab?: boolean;
  onChange?(value: string, viewUpdate: ViewUpdate): void;
  onStatistics?(data: Statistics): void;
  onUpdate?(viewUpdate: ViewUpdate): void;
  onCreateEditor?(view: EditorView, state: EditorState): void;
  extensions?: Extension[];
  root?: ShadowRoot | Document;
  initialState?: {
    json: any;
    fields?: Record<string, StateField<any>>;
  };
}

interface ReactCodeMirrorRef {
  editor?: HTMLDivElement | null;
  state?: EditorState;
  view?: EditorView;
}

Main Component

Hook API

Hook-based interface for advanced integration scenarios, custom containers, and direct CodeMirror state management.

function useCodeMirror(props: UseCodeMirror): {
  state: EditorState | undefined;
  setState: React.Dispatch<React.SetStateAction<EditorState | undefined>>;
  view: EditorView | undefined;
  setView: React.Dispatch<React.SetStateAction<EditorView | undefined>>;
  container: HTMLDivElement | null | undefined;
  setContainer: React.Dispatch<React.SetStateAction<HTMLDivElement | null | undefined>>;
};

interface UseCodeMirror extends ReactCodeMirrorProps {
  container?: HTMLDivElement | null;
}

Hook API

Extensions and Configuration

Default extension management and configuration utilities for setting up common CodeMirror features.

function getDefaultExtensions(options?: DefaultExtensionsOptions): Extension[];

interface DefaultExtensionsOptions {
  indentWithTab?: boolean;
  basicSetup?: boolean | BasicSetupOptions;
  placeholder?: string | HTMLElement;
  theme?: 'light' | 'dark' | 'none' | Extension;
  readOnly?: boolean;
  editable?: boolean;
}

Extensions

Utilities and Statistics

Utility functions for extracting editor statistics and managing editor state information.

function getStatistics(view: ViewUpdate): Statistics;

interface Statistics {
  length: number;
  lineCount: number;
  line: Line;
  lineBreak: string;
  readOnly: boolean;
  tabSize: number;
  selection: EditorSelection;
  selectionAsSingle: SelectionRange;
  ranges: readonly SelectionRange[];
  selectionCode: string;
  selections: string[];
  selectedText: boolean;
}

Utilities

Theme System

Built-in themes and utilities for creating custom themes for the CodeMirror editor.

const defaultLightThemeOption: Extension;

Themes

Types

Core types used throughout the API. All CodeMirror types are re-exported for convenience:

// Re-exported from @codemirror/state for direct use
export {
  EditorState,
  EditorStateConfig, 
  Extension,
  StateField,
  EditorSelection,
  SelectionRange,
  Line
} from '@codemirror/state';

// Re-exported from @codemirror/view for direct use
export {
  EditorView,
  ViewUpdate
} from '@codemirror/view';

// Re-exported from @uiw/codemirror-extensions-basic-setup
export { BasicSetupOptions } from '@uiw/codemirror-extensions-basic-setup';

// Internal annotation used for external change tracking
export const ExternalChange: import('@codemirror/state').AnnotationType<boolean>;

Usage:

// You can import CodeMirror types directly from react-codemirror
import { EditorState, EditorView, Extension } from "@uiw/react-codemirror";

// Instead of importing from the original packages
// import { EditorState, EditorView, Extension } from "@codemirror/state";
// import { EditorView } from "@codemirror/view";