react-codemirror2

demo @ scniro.github.io/react-codemirror2

npm install react-codemirror2

basic usage

import CodeMirror from 'react-codemirror2'

<CodeMirror
  value='<h1>I ♥ react-codemirror2</h1>'
  options={{
    mode: 'xml',
    theme: 'material',
    lineNumbers: true
  }}
  onValueChange={(editor, metadata, value) => {
  }}
/>

requiring codemirror resources

Since codemirror ships mostly unconfigured, the user is left with the responsibility for requiring any additional resources should they be necessary. This is often the case when specifying certain language modes and themes. How to import/require these assets will vary according to the specifics of your development environment. Below is a sample to include the assets necessary to specify a mode of xml (HTML) and a material theme.

note that the base codemirror.css file is required in all use cases

@import '~/node_modules/codemirror/lib/codemirror.css';
@import '~/node_modules/codemirror/theme/material.css';

import CodeMirror from 'react-codemirror2';
require('codemirror/mode/xml/xml');
require('codemirror/mode/javascript/javascript');

props

• className - sets class="react-codemirror2 yourClassName"
• options - see codemirror configuration
• value - set component value through props

triggers onValueSet

• resetCursorOnSet

boolean reset the internal codemirror cursor position should a new value prop be set. Default: false

• autoScrollCursorOnSet

boolean scroll the cursor position into view automatically. Default: false

props cont. (wrapped codemirror programming api)

• selection={array<{anchor, head}>} - setSelections

will programmatically select the ranges specified

<CodeMirror
  [...]
  selection={[{
    anchor: {ch: 8, line: 5},
    head: {ch: 37, line: 5}
  }]}
  onSelection={(editor, ranges) => {}}
/>

• scroll - scrollTo

will programmatically scroll to the specified coordinate

<CodeMirror
  [...]
  scroll={{
    x: 50,
    y: 50
  }}
  onScroll={(editor, position) => {}}
/>

• cursor - setCursor

will programmatically set cursor to the position specified

<CodeMirror
  [...]
  cursor={{
    line: 5,
    ch: 10
  }}
  onCursor={(editor, position) => {}}
/>

events

• editorWillMount()
• editorDidMount(editor, next)

calling optional next() will trigger editorDidConfigure

• editorDidConfigure(editor)
• onValueSet(editor, value)

returns the initial value via value

• editorWillUnmount(editor)

events cont. wrapped codemirror events

• onValueChange(editor, metadata, value) - change

returns the internal value of the editor

• onCursorActivity(editor) - cursorActivity
• onViewportChange(editor, viewportStart, viewportEnd) - viewportChange
• onGutterClick(editor, lineNumber, event) - gutterClick
• onFocus(editor, event) - focus
• onBlur(editor, event) - blur
• onUpdate(editor, event) - update
• onKeyDown(editor, event) - keydown
• onKeyUp(editor, event) - keyup
• onKeyPress(editor, event) - keypress
• onDragEnter(editor, event) - dragenter
• onDragOver(editor, event) - dragover
• onDrop(editor, event) - drop
• onSelection(editor, ranges) - beforeSelectionChange
• onScroll(editor, position) - scroll
• onCursor(editor, position)- cursorActivity

MIT © 2017 scniro