{"id":11663,"library":"react-codemirror2","title":"React CodeMirror 2 Wrapper","description":"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.","status":"maintenance","version":"9.0.1","language":"javascript","source_language":"en","source_url":"https://github.com/scniro/react-codemirror2","tags":["javascript","react","react-codemirror","codemirror","editor","syntax","ide","code","typescript"],"install":[{"cmd":"npm install react-codemirror2","lang":"bash","label":"npm"},{"cmd":"yarn add react-codemirror2","lang":"bash","label":"yarn"},{"cmd":"pnpm add react-codemirror2","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Core editor functionality; required as a peer dependency to allow explicit versioning and prevent conflicts.","package":"codemirror","optional":false},{"reason":"React framework for rendering the component.","package":"react","optional":false}],"imports":[{"note":"The default export behavior is not provided, and the package is CommonJS-based, which might require specific bundler configurations for ESM projects.","wrong":"import CodeMirror from 'react-codemirror2'","symbol":"UnControlled","correct":"import { UnControlled as CodeMirror } from 'react-codemirror2'"},{"note":"For TypeScript, ensure you import types correctly. This component requires explicit state management via `onBeforeChange`.","wrong":"const CodeMirror = require('react-codemirror2').Controlled","symbol":"Controlled","correct":"import { Controlled as CodeMirror } from 'react-codemirror2'"},{"note":"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.","wrong":"import { xml } from 'codemirror/mode/xml/xml'","symbol":"CodeMirror assets (CSS, modes, themes)","correct":"import 'codemirror/lib/codemirror.css';\nrequire('codemirror/mode/xml/xml');"}],"quickstart":{"code":"import React from 'react';\nimport { Controlled as CodeMirror } from 'react-codemirror2';\nimport 'codemirror/lib/codemirror.css';\nimport 'codemirror/theme/material.css';\nimport 'codemirror/mode/xml/xml';\nimport 'codemirror/mode/javascript/javascript';\n\ninterface MyEditorState {\n value: string;\n}\n\nclass MyControlledEditor extends React.Component<{}, MyEditorState> {\n constructor(props: {}) {\n super(props);\n this.state = {\n value: '
\n {\n this.setState({ value });\n }}\n onChange={(editor, data, value) => {\n console.log('Editor value changed:', value);\n }}\n />\n
\n );\n }\n}\n\nexport default MyControlledEditor;\n","lang":"typescript","description":"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."},"warnings":[{"fix":"Upgrade your React installation to `^19.x.x` or ensure compatibility if using an older `react-codemirror2` version.","message":"Version 9.0.0 bumps the React peer dependency to `v19.x`. Ensure your project uses a compatible React version.","severity":"breaking","affected_versions":">=9.0.0"},{"fix":"Upgrade your React installation to `^18.x.x`.","message":"Version 8.0.0 bumps the React peer dependency to `v18.x`. Ensure your project uses a compatible React version.","severity":"breaking","affected_versions":">=8.0.0 <9.0.0"},{"fix":"Update your event handler signatures for `copy`, `cut`, and `paste` to remove the fourth `event` parameter, typically leaving `(editor, data, value)`.","message":"Version 7.0.0 removed the `event` parameter from `copy`, `cut`, and `paste` event callbacks to align with `@types/codemirror`.","severity":"breaking","affected_versions":">=7.0.0"},{"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.","message":"This library is exclusively for CodeMirror 5 and is not compatible with CodeMirror 6. CodeMirror 6 is a complete rewrite with a different API.","severity":"gotcha","affected_versions":"*"},{"fix":"For Vite, consider adding `react-codemirror2` and `codemirror` to `optimizeDeps.include` in `vite.config.js` and potentially using `@rollup/plugin-commonjs`.","message":"The package build process is CommonJS-based. Modern ESM-centric bundlers (like Vite) might require specific configuration to handle these modules correctly.","severity":"gotcha","affected_versions":"*"},{"fix":"Always include `import 'codemirror/lib/codemirror.css';` and `require('codemirror/mode//.js');` (or similar for themes) in your project.","message":"CodeMirror modes, themes, and base CSS must be explicitly imported by the user. Failure to do so will result in missing features or styling.","severity":"gotcha","affected_versions":"*"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Ensure `import 'codemirror/lib/codemirror.css';` is present, and `require('codemirror/mode//.js');` is called for each mode used. Also check `options.mode`.","cause":"CodeMirror base CSS or specific language mode/theme files are not imported.","error":"Syntax highlighting missing or 'Mode not found for ...'"},{"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.","cause":"The `onBeforeChange` callback is not correctly updating the component's state, preventing the editor from reflecting new `value` props.","error":"Component does not update when 'value' prop changes in Controlled component."},{"fix":"For Vite, configure `vite.config.js` with `optimizeDeps: { include: ['react-codemirror2', 'codemirror'] }` and consider using `@rollup/plugin-commonjs` if issues persist during build.","cause":"An ESM-first bundler (e.g., Vite) is struggling to process the CommonJS output of `react-codemirror2` or its dependencies (like `codemirror`).","error":"TypeError: Cannot read properties of undefined (reading 'mode') or similar CJS/ESM interop errors in modern bundlers."}],"ecosystem":"npm"}