React-cmirror NPM

react-cmirror

Codemirror Component for React.js, all Codemirror options and events are supported.

1. Installation

npm install --save react-cmirror

2. Demo & Examples

To build the examples locally, run:

npm install
npm run start

3. Usage

Minimal usage:

import ReactCodeMirror from 'react-cmirror';
<ReactCodeMirror value={text} />

4. Properties

value: the editor value
options: options for CodeMirror, see the CodeMirror Configuration for available options.
width: set width the editor, width and height can be either numbers (interpreted as pixels) or CSS units ("100%", for example). You can pass null for either of them to indicate that that dimension should not be changed.
height: set height the editor, same as width

Note: width and height overriding the css style of CodeMirror, if you want to change the style of CodeMirror, refer to CodeMirror Customized Styling for detail.

5. Events

CodeMirror support kinds of Events, to use these events, you need to follow the rules:

Uppercase the first letter of event name, and add on at the beginning, as the property of editor.
Event handle function recieve arguments as CodeMirror defined.

For example, to deal with scroll event, you need set property onScroll, and handeScroll will recieve instance argument :

handleScroll = (instance /*CodeMirror instance*/) => {
  console.log(instance);
}

<ReactCodeMirror onScroll={this.handleScroll} />

6. Access to CodeMirror

You can get CodeMirror instance from editor and CodeMirror object from codemirror by using ref.

getInstance = (instance) => {
  this.codemirror = instance.codemirror;
  this.editor = instance.editor;
}
<ReactCodeMirror ref={this.getInstance}/>

7. Language modes&Themes

Language modes CodeMirror support syntax highlighting by setting language mode. These Language Modes are available. By default, no modes is included, to enable this:

import language mode from mode directory of codemirror
set mode option in options property

Themes To change the color schemes of highlighting, theme option is supplied, these Themes are avalible, to use like this:

import theme from theme directory of codemirror
set theme in options property

import ReactCodeMirror from 'react-cmirror';
import 'codemirror/mode/markdown/markdown';
import 'codemirror/theme/monokai.css';

<ReactCodeMirror options={{mode: 'markdown', theme: 'monokai'}} />

8. Addon

Addons are used to implement extra editor functionality, import addon after react-cmirror, and set options follow the instruction.

import ReactCodeMirror from 'react-cmirror';
import 'codemirror/addon/display/fullscreen';
import 'codemirror/addon/display/fullscreen.css';
<ReactCodeMirror options={{fullScreen: true}} />

9. Async loading

Asynchronous loading page may cause unexpected rendering, use addon autorefresh to resolve it. Or you can call refresh function of CodeMirror manually after the page loaded.