Security News
ESLint is Now Language-Agnostic: Linting JSON, Markdown, and Beyond
ESLint has added JSON and Markdown linting support with new officially-supported plugins, expanding its versatility beyond JavaScript.
react-codemirror
Advanced tools
The excellent CodeMirror editor as a React.js component.
Live demo: JedWatson.github.io/react-codemirror
To build the examples locally, run:
npm install
npm start
Then open localhost:8000
in a browser.
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/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 = require('react');
var 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'));
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:
@import (inline) "./node_modules/codemirror/lib/codemirror.css";
If you're using Webpack with the css loader, you can require the codemirror css in your application instead:
require('codemirror/lib/codemirror.css');
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">
.
focus
focuses the CodeMirror instancegetCodeMirror
returns 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).
autoFocus
Boolean
automatically focuses the editor when it is mounted (default false)autoSave
Boolean
automatically persist changes to underlying textarea (default false)className
String
adds a custom css class to the editorcodeMirrorInstance
Function
provides a specific CodeMirror instance (defaults to require('codemirror')
)defaultValue
String
provides a default (not change tracked) value to the editorname
String
sets the name of the editor input fieldoptions
Object
options passed to the CodeMirror instanceonChange
Function (newValue)
called when a change is madeonCursorActivity
Function (codemirror)
called when the cursor is movedonFocusChange
Function (focused)
called when the editor is focused or loses focusonScroll
Function (scrollInfo)
called when the editor is scrolledpreserveScrollPosition
Boolean=false
preserve previous scroll position after updating valuevalue
String
the editor valueSee the CodeMirror API Docs for the available options.
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:
codemirror
package dependency (in addition to react-codemirror
)react-codemirror
itselfmode
option in the options
objectvar React = require('react');
var CodeMirror = require('react-codemirror');
require('codemirror/mode/javascript/javascript');
require('codemirror/mode/xml/xml');
require('codemirror/mode/markdown/markdown');
<CodeMirror ... options={{
mode: 'javascript',
}} />
See the example source for a reference implementation including JavaScript and markdown syntax highlighting.
Copyright (c) 2016 Jed Watson. MIT Licensed.
v1.0.0 / 2017-05-14
path
prop has been changed to name
react
and react-dom
to ">=15.5 <16"
React.findDOMNode
props.value
has changedonCursorActivity
propautoFocus
propSee commit history for earlier changes
FAQs
Codemirror
The npm package react-codemirror receives a total of 14,008 weekly downloads. As such, react-codemirror popularity was classified as popular.
We found that react-codemirror demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
ESLint has added JSON and Markdown linting support with new officially-supported plugins, expanding its versatility beyond JavaScript.
Security News
Members Hub is conducting large-scale campaigns to artificially boost Discord server metrics, undermining community trust and platform integrity.
Security News
NIST has failed to meet its self-imposed deadline of clearing the NVD's backlog by the end of the fiscal year. Meanwhile, CVE's awaiting analysis have increased by 33% since June.