Registry / web-framework / react-codemirror2

react-codemirror2

library9.0.1jsnpmunverified

react-codemirror2 is a React component wrapper for CodeMirror 5, designed to embed a customizable code editor into React applications. It provides both `Controlled` and `UnControlled` components, catering to different state management paradigms within React. The current stable version is 9.0.1. Its release cadence is primarily tied to major React version updates for peer dependency compatibility and critical bug fixes, rather than a fixed schedule. A key differentiator is its explicit commitment to CodeMirror 5, meaning it does not support the fundamentally rewritten CodeMirror 6 API. Developers must manually import CodeMirror modes and themes. The library ships with TypeScript types and is widely used for creating syntax-highlighting text areas.

web-framework

npm install react-codemirror2

github ↗package ↗

INSTALL

IMPORT

SIG · REACT-CODEMIRROR2

react-codemirror2

web-frameworkjavascriptv9.0.1

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

UnControlled

✓ import { UnControlled as CodeMirror } from 'react-codemirror2'

✗ import CodeMirror from 'react-codemirror2'

The default export behavior is not provided, and the package is CommonJS-based, which might require specific bundler configurations for ESM projects.

Controlled

✓ import { Controlled as CodeMirror } from 'react-codemirror2'

✗ const CodeMirror = require('react-codemirror2').Controlled

For TypeScript, ensure you import types correctly. This component requires explicit state management via `onBeforeChange`.

CodeMirror assets (CSS, modes, themes)

✓ import 'codemirror/lib/codemirror.css'; require('codemirror/mode/xml/xml');

✗ import { xml } from 'codemirror/mode/xml/xml'

CodeMirror assets often rely on side-effect imports (`import '...'` for CSS, `require(...)` for modes/themes) to modify the global CodeMirror instance. Bundler configuration might be needed for ESM contexts.

Demonstrates a controlled React component wrapping CodeMirror 5, showing how to manage editor state and include necessary CSS and language modes. This setup allows external control over the editor's content.

import React from 'react'; import { Controlled as CodeMirror } from 'react-codemirror2'; import 'codemirror/lib/codemirror.css'; import 'codemirror/theme/material.css'; import 'codemirror/mode/xml/xml'; import 'codemirror/mode/javascript/javascript'; interface MyEditorState { value: string; } class MyControlledEditor extends React.Component<{}, MyEditorState> { constructor(props: {}) { super(props); this.state = { value: '<h1>Hello, controlled CodeMirror!</h1>\n<script>\n console.log("This is JavaScript");\n</script>', }; } render() { const options = { mode: 'xml', theme: 'material', lineNumbers: true, indentUnit: 2, tabSize: 2, }; return ( <div> <p>Edit the code below:</p> <CodeMirror value={this.state.value} options={options} onBeforeChange={(editor, data, value) => { this.setState({ value }); }} onChange={(editor, data, value) => { console.log('Editor value changed:', value); }} /> </div> ); } } export default MyControlledEditor;

Debug

Known issues

breakingVersion 9.0.0 bumps the React peer dependency to `v19.x`. Ensure your project uses a compatible React version.

fix

Upgrade your React installation to `^19.x.x` or ensure compatibility if using an older `react-codemirror2` version.

affects: >=9.0.0

breakingVersion 8.0.0 bumps the React peer dependency to `v18.x`. Ensure your project uses a compatible React version.

fix

Upgrade your React installation to `^18.x.x`.

affects: >=8.0.0 <9.0.0

breakingVersion 7.0.0 removed the `event` parameter from `copy`, `cut`, and `paste` event callbacks to align with `@types/codemirror`.

fix

Update your event handler signatures for `copy`, `cut`, and `paste` to remove the fourth `event` parameter, typically leaving `(editor, data, value)`.

affects: >=7.0.0

gotchaThis library is exclusively for CodeMirror 5 and is not compatible with CodeMirror 6. CodeMirror 6 is a complete rewrite with a different API.

fix

If you require CodeMirror 6, you must use a different wrapper library, such as `react-codemirror` (without the '2'), or integrate CodeMirror 6 directly.

affects: *

gotchaThe package build process is CommonJS-based. Modern ESM-centric bundlers (like Vite) might require specific configuration to handle these modules correctly.

fix

For Vite, consider adding `react-codemirror2` and `codemirror` to `optimizeDeps.include` in `vite.config.js` and potentially using `@rollup/plugin-commonjs`.

affects: *

gotchaCodeMirror modes, themes, and base CSS must be explicitly imported by the user. Failure to do so will result in missing features or styling.

fix

Always include `import 'codemirror/lib/codemirror.css';` and `require('codemirror/mode/<mode>/<mode>.js');` (or similar for themes) in your project.

affects: *

Errors

Common errors & fixes

Syntax highlighting missing or 'Mode not found for ...'

CodeMirror base CSS or specific language mode/theme files are not imported.

fix

Ensure `import 'codemirror/lib/codemirror.css';` is present, and `require('codemirror/mode/<your-mode>/<your-mode>.js');` is called for each mode used. Also check `options.mode`.

Component does not update when 'value' prop changes in Controlled component.

The `onBeforeChange` callback is not correctly updating the component's state, preventing the editor from reflecting new `value` props.

fix

For controlled components, ensure `onBeforeChange={(editor, data, value) => this.setState({ value })}` (or equivalent for functional components) is implemented to update the parent component's state.

TypeError: Cannot read properties of undefined (reading 'mode') or similar CJS/ESM interop errors in modern bundlers.

An ESM-first bundler (e.g., Vite) is struggling to process the CommonJS output of `react-codemirror2` or its dependencies (like `codemirror`).

fix

For Vite, configure `vite.config.js` with `optimizeDeps: { include: ['react-codemirror2', 'codemirror'] }` and consider using `@rollup/plugin-commonjs` if issues persist during build.

Upgrade

Version history

9.0.1latest on npm

Audit

Dependencies

codemirrorrequiredCore editor functionality; required as a peer dependency to allow explicit versioning and prevent conflicts.

reactrequiredReact framework for rendering the component.

Agent activity

4 hits · last 30 days

node

Resources

githubhttps://github.com/scniro/react-codemirror2 ↗

packagehttps://www.npmjs.com/package/react-codemirror2 ↗