Package Exports

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 (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

Codemirror

The excellent CodeMirror editor as a React.js component.

Demo & Examples

Live demo: JedWatson.github.io/react-codemirror

To build the examples locally, run:

npm install
npm start

Then open localhost:8000 in a browser.

Installation

The easiest way to use codemirror is to install it from NPM and include it in your own React build process (using Browserify, Webpack, etc).

You can also use the standalone build by including dist/codemirror.js in your page. If you use this, make sure you have already included React, and it is available as a global variable.

npm install codemirror --save

Usage

var React = require('react'),
    Codemirror = require('react-codemirror');

var App = React.createClass({
    getInitialState: function() {
        return {
            code: "// Code"
        };
    },
    updateCode: function(newCode) {
        this.setState({
            code: newCode
        });
    },
    render: function() {
        var options = {
            lineNumbers: true
        };
        return <Codemirror value={this.state.code} onChange={this.updateCode} options={options} />
    }
});

React.render(<App />, document.getElementById('app'));

Properties

value String the editor value
options Object (newValue) options passed to the CodeMirror instance
onChange Function (newValue) called when a change is made
onFocusChange Function (focused) called when the editor is focused or loses focus

See the CodeMirror API Docs for the available options.

react-codemirror