Package Exports

@uiw/react-codemirror

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@uiw/react-codemirror) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

react-codemirror

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

Features:

🌱 Use codemirror 6. 🚀 Quickly and easily configure the API.

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