Demo & Examples
Live demo: JedWatson.github.io/react-codemirror
To build the examples locally, run:
npm install npm start
localhost:8000 in a browser.
You can also use the standalone build by including
dist/react-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 react-codemirror --save
Require the CodeMirror component and render it with JSX:
var React = ;var CodeMirror = ;var App = React;React;
Include the CSS
Ensure that CodeMirror's stylesheet
codemirror.css is loaded.
If you're using LESS (similar for Sass) you can import the css directly from the codemirror package, as shown in example.less:
If you're using Webpack with the css loader, you can require the codemirror css in your application instead:
Alternatively, you can explicitly link the
codemirror.css file from the CodeMirror project in your index.html file, e.g
<link href="css/codemirror.css" rel="stylesheet">.
focusfocuses the CodeMirror instance
getCodeMirrorreturns the CodeMirror instance, available .
You can interact with the CodeMirror instance using a
ref and the
getCodeMirror() method after the
componentDidMount lifecycle event has fired (including inside the
componentDidMount event in a parent Component).
Booleanautomatically focuses the editor when it is mounted (default false)
Booleanautomatically persist changes to underlying textarea (default false)
Stringadds a custom css class to the editor
Functionprovides a specific CodeMirror instance (defaults to
Stringprovides a default (not change tracked) value to the editor
Stringsets the name of the editor input field
Objectoptions passed to the CodeMirror instance
Function (newValue)called when a change is made
Function (codemirror)called when the cursor is moved
Function (focused)called when the editor is focused or loses focus
Function (scrollInfo)called when the editor is scrolled
Boolean=falsepreserve previous scroll position after updating value
Stringthe editor value
See the CodeMirror API Docs for the available options.
Using Language Modes
Several language modes are included with CodeMirror for syntax highlighting.
By default (to optimise bundle size) all modes are not included. To enable syntax highlighting:
- install the
codemirrorpackage dependency (in addition to
- require the language modes you wish to make available after you require
- set the
modeoption in the
Copyright (c) 2016 Jed Watson. MIT Licensed.