@uiw/react-codemirror
    TypeScript icon, indicating that this package has built-in type declarations

    4.0.0 • Public • Published

    react-codemirror

    NPM Downloads Build & Deploy Open in unpkg npm version Coverage Status

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

    ⚠️ The v3 version document preview is here.

    Features:

    🚀 Quickly and easily configure the API.
    🌱 Versions after @uiw/react-codemirror@v4 use codemirror 6. #88.
    ⚛️ 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

    Open in CodeSandbox

    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 Language

    Open in CodeSandbox

    import CodeMirror from '@uiw/react-codemirror';
    import { StreamLanguage } from '@codemirror/stream-parser';
    import { go } from '@codemirror/legacy-modes/mode/go';
    
    const goLang = `package main
    import "fmt"
    
    func main() {
      fmt.Println("Hello, 世界")
    }`;
    
    export default function App() {
      return (
        <CodeMirror
          value={goLang}
          height="200px"
          extensions={[StreamLanguage.define(go)]}
          onChange={(value, viewUpdate) => {
            console.log('value:', value);
          }}
        />
      );
    }

    Support Hook

    Open in CodeSandbox

    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;
      /** focus on the editor. */
      autoFocus?: boolean;
      theme?: 'light' | 'dark';
      /**
       * Whether to optional basicSetup by default
       * @default true
       */
      basicSetup?: boolean;
      /**
       * Whether to optional basicSetup by default
       * @default true
       */
      /**
       * Fired whenever a change occurs to the document.
       */
      onChange?(value: string, viewUpdate: ViewUpdate): void;
      /** Fired whenever a change occurs to the document. There is a certain difference with `onChange`. */
      onUpdate?(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;
    }

    Related

    License

    Licensed under the MIT License.

    Install

    npm i @uiw/react-codemirror

    DownloadsWeekly Downloads

    5,708

    Version

    4.0.0

    License

    MIT

    Unpacked Size

    70.9 kB

    Total Files

    25

    Last publish

    Collaborators

    • wcjiang