react-codemirror

CodeMirror component for React. Demo Preview: @uiwjs.github.io/react-codemirror

Features:

🚀 Quickly and easily configure the API.
🌱 Use codemirror 6.
⚛️ Support the features of React Hook(requires React 16.8+).
📚 Use Typescript to write, better code hints.
🌎 There are better sample previews.

Install

# Not dependent on uiw.
npm install @uiw/react-codemirror --save

Usage

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

export default function App() {
  return (
    <CodeMirror
      value="console.log('hello world!');"
      height="200px"
      extensions={[javascript({ jsx: true })]}
      onChange={(value, viewUpdate) => {
        console.log("value:", value);
      }}
    />
  );
}

Support Hook

import { useEffect, useRef } from "react";
import { useCodeMirror } from "@uiw/react-codemirror";
import { javascript } from "@codemirror/lang-javascript";

const code = "console.log('hello world!');\n\n\n";

export default function App() {
  const editor = useRef();
  const { setContainer } = useCodeMirror({
    container: editor.current,
    extensions: [javascript()],
    value: code
  });

  useEffect(() => {
    if (editor.current) {
      setContainer(editor.current);
    }
  }, [editor.current]);

  return <div ref={editor} />;
}

Props

value?: string value of the auto created model in the editor.
width?: string width of editor. Defaults to auto.
height?: string height of editor. Defaults to auto.
theme?: light / dark Defaults to light.

import React from "react";
import { EditorState, EditorStateConfig, Extension } from "@codemirror/state";
import { EditorView } from "@codemirror/view";
export * from './useCodeMirror';
export * from "@codemirror/view";
export * from "@codemirror/basic-setup";
export * from "@codemirror/state";
export interface ReactCodeMirrorProps extends Omit<EditorStateConfig, 'doc' | 'extensions'>, Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> {
  /**
   * value of the auto created model in the editor.
   */
  value?: string;
  height?: string;
  minHeight?: string;
  maxHeight?: string;
  width?: string;
  minWidth?: string;
  maxWidth?: string;
  theme?: 'light' | 'dark';
  /**
   * Fired whenever a change occurs to the document.
   */
  onChange?(value: string, viewUpdate: ViewUpdate): void;
  /**
   * Extension values can be [provided](https://codemirror.net/6/docs/ref/#state.EditorStateConfig.extensions) when creating a state to attach various kinds of configuration and behavior information.
   * They can either be built-in extension-providing objects,
   * such as [state fields](https://codemirror.net/6/docs/ref/#state.StateField) or [facet providers](https://codemirror.net/6/docs/ref/#state.Facet.of),
   * or objects with an extension in its `extension` property. Extensions can be nested in arrays arbitrarily deep—they will be flattened when processed.
   */
  extensions?: Extension[];
}
export interface ReactCodeMirrorRef {
  editor?: HTMLDivElement | null;
  state?: EditorState;
  view?: EditorView;
}

@uiw/react-md-editor: A simple markdown editor with preview, implemented with React.js and TypeScript.
@uiw/react-monacoeditor: Monaco Editor component for React.
@uiw/react-markdown-editor: A markdown editor with preview, implemented with React.js and TypeScript.
@uiw/react-markdown-preview: React component preview markdown text in web browser.

License

Licensed under the MIT License.

@uiw/react-codemirror

Package Exports

Readme