1.4.2 • Public • Published


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


    npm npm

    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*/) => {
    <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.


    Copyright (c) 2017 ZiQiangWang MIT Licensed.


    npm i react-cmirror

    DownloadsWeekly Downloads






    Unpacked Size

    38 kB

    Total Files


    Last publish


    • wangziqiang