; } ``` ## Using custom theme ```jsx import { oneDark } from '@codemirror/theme-one-dark'; import CodeMirror from '@uiw/react-codemirror'; import { javascript } from '@codemirror/lang-javascript'; export default function App() { return ( { console.log('value:', value); }} /> ); } ``` ## 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'` / `Extension` Defaults to `'light'`. ```ts import React from 'react'; import { EditorState, EditorStateConfig, Extension } from '@codemirror/state'; import { EditorView, ViewUpdate } from '@codemirror/view'; export * from '@codemirror/view'; export * from '@codemirror/basic-setup'; export * from '@codemirror/state'; export interface UseCodeMirror extends ReactCodeMirrorProps { container?: HTMLDivElement | null; } export declare function useCodeMirror(props: UseCodeMirror): { state: EditorState | undefined; setState: import('react').Dispatch>; view: EditorView | undefined; setView: import('react').Dispatch>; container: HTMLDivElement | null | undefined; setContainer: import('react').Dispatch>; }; export interface ReactCodeMirrorProps extends Omit, Omit, 'onChange' | 'placeholder'> { /** 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; /** Enables a placeholder—a piece of example content to show when the editor is empty. */ placeholder?: string | HTMLElement; /** * `light` / `dark` / `Extension` Defaults to `light`. * @default light */ theme?: 'light' | 'dark' | Extension; /** * Whether to optional basicSetup by default * @default true */ basicSetup?: boolean; /** * This disables editing of the editor content by the user. * @default true */ editable?: boolean; /** * Whether to optional basicSetup by default * @default true */ indentWithTab?: boolean; /** 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[]; /** * If the view is going to be mounted in a shadow root or document other than the one held by the global variable document (the default), you should pass it here. * Originally from the [config of EditorView](https://codemirror.net/6/docs/ref/#view.EditorView.constructor%5Econfig.root) */ root?: ShadowRoot | Document; } export interface ReactCodeMirrorRef { editor?: HTMLDivElement | null; state?: EditorState; view?: EditorView; } declare const ReactCodeMirror: React.ForwardRefExoticComponent< ReactCodeMirrorProps & React.RefAttributes >; export default ReactCodeMirror; ``` ### Related - [@uiw/react-textarea-code-editor](https://github.com/uiwjs/react-textarea-code-editor): A simple code editor with syntax highlighting. - [@uiw/react-md-editor](https://github.com/uiwjs/react-md-editor): A simple markdown editor with preview, implemented with React.js and TypeScript. - [@uiw/react-monacoeditor](https://github.com/jaywcjlove/react-monacoeditor): Monaco Editor component for React. - [@uiw/react-markdown-editor](https://github.com/uiwjs/react-markdown-editor): A markdown editor with preview, implemented with React.js and TypeScript. - [@uiw/react-markdown-preview](https://github.com/uiwjs/react-markdown-preview): React component preview markdown text in web browser. - [Online JSON Viewer](https://github.com/uiwjs/json-viewer) Online JSON Viewer, JSON Beautifier to beautify and tree view of JSON data - It works as JSON Pretty Print to pretty print JSON data. ## Contributors As always, thanks to our amazing contributors!

Made with [github-action-contributors](https://github.com/jaywcjlove/github-action-contributors). ## License Licensed under the MIT License.