# react-codemirror

> Codemirror

Latest version **1.0.0** (published 2017-05-14) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-codemirror
pnpm add react-codemirror
yarn add react-codemirror
bun add react-codemirror
```

## Health

**Score 23/100 (F)** — status: abandoned.

Positive: has types package; no vulnerabilities; high quality score.

Warnings: low downloads; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.0 |
| Published | 2017-05-14 |
| First published | 2015-05-21 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | separate (@types/react-codemirror) |
| Module format | CommonJS |
| Dependencies | 6 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1552 |
| Author | Jed Watson |
| Maintainers | jedwatson |
| Keywords | react, react-component, codemirror, editor, code |

## Links

- npm: https://www.npmjs.com/package/react-codemirror
- Repository: https://github.com/JedWatson/react-codemirror
- Issues: https://github.com/JedWatson/react-codemirror/issues
- npm.io page: https://npm.io/package/react-codemirror

## Dependencies (6)

- [classnames](https://npm.io/package/classnames.md) ^2.2.5
- [codemirror](https://npm.io/package/codemirror.md) ^5.18.2
- [prop-types](https://npm.io/package/prop-types.md) ^15.5.4
- [lodash.isequal](https://npm.io/package/lodash.isequal.md) ^4.5.0
- [lodash.debounce](https://npm.io/package/lodash.debounce.md) ^4.0.8
- [create-react-class](https://npm.io/package/create-react-class.md) ^15.5.1

## Alternatives

- [flatbuffers](https://npm.io/package/flatbuffers.md) — 6.0M weekly downloads
- [jwt-simple](https://npm.io/package/jwt-simple.md) — 259.5K weekly downloads
- [@exodus/patch-broken-hermes-typed-arrays](https://npm.io/package/@exodus/patch-broken-hermes-typed-arrays.md) — 28.5K weekly downloads
- [@native-to-anchor/buffer-layout](https://npm.io/package/@native-to-anchor/buffer-layout.md) — 12.2K weekly downloads
- [binary-parser-encoder](https://npm.io/package/binary-parser-encoder.md) — 5.3K weekly downloads

## Recent versions

- 1.0.0 (latest) — 2017-05-14
- 0.3.0 — 2016-11-22
- 0.2.6 — 2016-04-09
- 0.2.5 — 2016-01-16
- 0.2.4 — 2016-01-16
- 0.2.3 — 2015-12-29
- 0.2.2 — 2015-12-01
- 0.2.1 — 2015-11-18
- 0.2.0 — 2015-10-28
- 0.1.7 — 2015-10-21
- 0.1.6 — 2015-10-17
- 0.1.5 — 2015-09-05
- 0.1.4 — 2015-09-01
- 0.1.3 — 2015-08-03
- 0.1.2 — 2015-05-31
- … 2 more at https://npm.io/package/react-codemirror/versions

## README

# Codemirror

The excellent [CodeMirror](https://codemirror.net) editor as a [React.js](http://facebook.github.io/react) component.


## Demo & Examples

Live demo: [JedWatson.github.io/react-codemirror](http://JedWatson.github.io/react-codemirror)

To build the examples locally, run:

```
npm install
npm start
```

Then open [`localhost:8000`](http://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](http://browserify.org), [Webpack](http://webpack.github.io/), 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
```


## Usage

Require the CodeMirror component and render it with JSX:

```javascript
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'));
```

### 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](example/src/example.less):

```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:

```js
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">`.

### Methods

* `focus` focuses the CodeMirror instance
* `getCodeMirror` 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).

### Properties

* `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 editor
* `codeMirrorInstance` `Function` provides a specific CodeMirror instance (defaults to `require('codemirror')`)
* `defaultValue` `String` provides a default (not change tracked) value to the editor
* `name` `String` sets the name of the editor input field
* `options` `Object` options passed to the CodeMirror instance
* `onChange` `Function (newValue)` called when a change is made
* `onCursorActivity` `Function (codemirror)` called when the cursor is moved
* `onFocusChange` `Function (focused)` called when the editor is focused or loses focus
* `onScroll` `Function (scrollInfo)` called when the editor is scrolled
* `preserveScrollPosition` `Boolean=false` preserve previous scroll position after updating value
* `value` `String` the editor value

See the [CodeMirror API Docs](https://codemirror.net/doc/manual.html#api) for the available options.

### Using Language Modes

Several [language modes](https://codemirror.net/mode/) are included with CodeMirror for syntax highlighting.

By default (to optimise bundle size) all modes are not included. To enable syntax highlighting:

* install the `codemirror` package dependency (in addition to `react-codemirror`)
* require the language modes you wish to make available _after_ you require `react-codemirror` itself
* set the `mode` option in the `options` object

```js
var 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](https://github.com/JedWatson/react-codemirror/blob/master/example/src/example.js) for a reference implementation including JavaScript and markdown syntax highlighting.

### License

Copyright (c) 2016 Jed Watson. [MIT](LICENSE) Licensed.

---
_Source: https://npm.io/package/react-codemirror · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._