react-codemirror2

What is react-codemirror2?

The react-codemirror2 package is a React component wrapper for CodeMirror, a versatile text editor implemented in JavaScript for the browser. It allows you to integrate CodeMirror into your React applications, providing a rich text editor with syntax highlighting, autocompletion, and other advanced features.

What are react-codemirror2's main functionalities?

Basic Usage

This code demonstrates the basic usage of the react-codemirror2 package. It sets up a CodeMirror editor with JavaScript syntax highlighting and a material theme. The editor's value is controlled by React state.

import React from 'react';
import { Controlled as CodeMirror } from 'react-codemirror2';
import 'codemirror/lib/codemirror.css';
import 'codemirror/theme/material.css';

const MyEditor = () => {
  const [value, setValue] = React.useState('');

  return (
    <CodeMirror
      value={value}
      options={{
        mode: 'javascript',
        theme: 'material',
        lineNumbers: true
      }}
      onBeforeChange={(editor, data, value) => {
        setValue(value);
      }}
    />
  );
};

export default MyEditor;

Event Handling

This code demonstrates how to handle events in the react-codemirror2 package. It logs messages to the console when the content changes or when the editor loses focus.

import React from 'react';
import { Controlled as CodeMirror } from 'react-codemirror2';
import 'codemirror/lib/codemirror.css';
import 'codemirror/theme/material.css';

const MyEditor = () => {
  const [value, setValue] = React.useState('');

  return (
    <CodeMirror
      value={value}
      options={{
        mode: 'javascript',
        theme: 'material',
        lineNumbers: true
      }}
      onBeforeChange={(editor, data, value) => {
        setValue(value);
      }}
      onChange={(editor, data, value) => {
        console.log('Content changed:', value);
      }}
      onBlur={(editor, event) => {
        console.log('Editor lost focus');
      }}
    />
  );
};

export default MyEditor;

Custom Key Bindings

This code demonstrates how to set custom key bindings in the react-codemirror2 package. It uses the 'sublime' keymap for the CodeMirror editor.

import React from 'react';
import { Controlled as CodeMirror } from 'react-codemirror2';
import 'codemirror/lib/codemirror.css';
import 'codemirror/theme/material.css';
import 'codemirror/keymap/sublime';

const MyEditor = () => {
  const [value, setValue] = React.useState('');

  return (
    <CodeMirror
      value={value}
      options={{
        mode: 'javascript',
        theme: 'material',
        lineNumbers: true,
        keyMap: 'sublime'
      }}
      onBeforeChange={(editor, data, value) => {
        setValue(value);
      }}
    />
  );
};

export default MyEditor;

Other packages similar to react-codemirror2

react-ace

react-ace is a React component for the Ace editor. It provides similar functionalities to react-codemirror2, such as syntax highlighting, autocompletion, and customizable themes. However, it uses the Ace editor instead of CodeMirror, which may have different performance characteristics and feature sets.

react-monaco-editor

react-monaco-editor is a React component for the Monaco editor, which is the editor that powers Visual Studio Code. It offers advanced features like IntelliSense, parameter hints, and a rich API for customization. Compared to react-codemirror2, it provides a more feature-rich editing experience but may have a steeper learning curve.

react-simple-code-editor

react-simple-code-editor is a lightweight code editor component for React. It provides basic syntax highlighting and editing capabilities using Prism.js. It is simpler and more lightweight compared to react-codemirror2, making it suitable for use cases where a full-fledged editor is not required.

README

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

component specific events

• editorWillMount()
• editorDidMount(editor, next)

calling optional next() will trigger editorDidConfigure

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

returns the initial value via value

• editorWillUnmount(editor)

codemirror wrapped events

• onValueChange(editor, metadata, value)

returns the internal value of the editor

• onCursorActivity(editor)
• onViewportChange(editor, viewportStart, viewportEnd)
• onGutterClick(editor, lineNumber, event)
• onFocus(editor, event)
• onBlur(editor, event)
• onScroll(editor, event)
• onUpdate(editor, event)
• onKeyDown(editor, event)
• onKeyUp(editor, event)
• onKeyPress(editor, event)
• onDragEnter(editor, event)
• onDragOver(editor, event)
• onDrop(editor, event)

MIT © 2017 scniro