Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/ziqiangwang/react-cmirror
Codemirror Component for React.js, all Codemirror options and event are supported.
https://github.com/ziqiangwang/react-cmirror
codemirror events options reactjs reactjs-components
Last synced: 2 months ago
JSON representation
Codemirror Component for React.js, all Codemirror options and event are supported.
- Host: GitHub
- URL: https://github.com/ziqiangwang/react-cmirror
- Owner: ZiQiangWang
- License: mit
- Created: 2017-08-01T15:12:15.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2019-03-20T14:20:37.000Z (almost 6 years ago)
- Last Synced: 2024-04-27T03:03:07.009Z (8 months ago)
- Topics: codemirror, events, options, reactjs, reactjs-components
- Language: JavaScript
- Size: 151 KB
- Stars: 14
- Watchers: 3
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# react-cmirror
> Codemirror Component for React.js, all Codemirror options and events are supported.
[中文](README_zh.md)|[English](README.md)
[](https://www.npmjs.com/package/react-cmirror)
[](https://www.npmjs.com/package/react-cmirror)
## 1. Installation
```js
npm install --save react-cmirror
```
## 2. Demo & Examples
To build the examples locally, run:
```js
npm install
npm run start
```
## 3. Usage
Minimal usage:
```js
import ReactCodeMirror from 'react-cmirror';
```
## 4. Properties
- `value`: the editor value
- `options`: options for CodeMirror, see the [ CodeMirror Configuration](http://codemirror.net/doc/manual.html#config) 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](http://codemirror.net/doc/manual.html#styling) for detail.
## 5. Events
CodeMirror support kinds of [Events](https://codemirror.net/doc/manual.html#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 :
```js
handleScroll = (instance /*CodeMirror instance*/) => {
console.log(instance);
}
```
## 6. Access to CodeMirror
You can get CodeMirror instance from `editor` and CodeMirror object from `codemirror` by using ref.
```js
getInstance = (instance) => {
this.codemirror = instance.codemirror;
this.editor = instance.editor;
}
```
## 7. Language modes&Themes
**Language modes**
CodeMirror support syntax highlighting by setting language mode. These [Language Modes](https://codemirror.net/mode/) 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](http://codemirror.net/demo/theme.html) are avalible, to use like this:
- import theme from `theme` directory of codemirror
- set `theme` in `options` property
```js
import ReactCodeMirror from 'react-cmirror';
import 'codemirror/mode/markdown/markdown';
import 'codemirror/theme/monokai.css';
```
## 8. Addon
[Addons](http://codemirror.net/doc/manual.html#addons) are used to implement extra editor functionality, import addon after `react-cmirror`, and set options follow the instruction.
```js
import ReactCodeMirror from 'react-cmirror';
import 'codemirror/addon/display/fullscreen';
import 'codemirror/addon/display/fullscreen.css';
```
## 9. Async loading
Asynchronous loading page may cause unexpected rendering, use addon [autorefresh](http://codemirror.net/addon/display/autorefresh.js) to resolve it. Or you can call **refresh** function of CodeMirror manually after the page loaded.
## License
Copyright (c) 2017 ZiQiangWang [MIT](https://github.com/ZiQiangWang/react-cmirror/blob/master/LICENSE) Licensed.