{"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.","language":"javascript","status":"maintenance","last_verified":"Sun Apr 19","install":{"commands":["npm install react-codemirror2"],"cli":null},"imports":["import { UnControlled as CodeMirror } from 'react-codemirror2'","import { Controlled as CodeMirror } from 'react-codemirror2'","import 'codemirror/lib/codemirror.css';\nrequire('codemirror/mode/xml/xml');"],"auth":{"required":false,"env_vars":[]},"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: '<h1>Hello, controlled CodeMirror!</h1>\\n<script>\\n  console.log(\"This is JavaScript\");\\n</script>',\n    };\n  }\n\n  render() {\n    const options = {\n      mode: 'xml',\n      theme: 'material',\n      lineNumbers: true,\n      indentUnit: 2,\n      tabSize: 2,\n    };\n\n    return (\n      <div>\n        <p>Edit the code below:</p>\n        <CodeMirror\n          value={this.state.value}\n          options={options}\n          onBeforeChange={(editor, data, value) => {\n            this.setState({ value });\n          }}\n          onChange={(editor, data, value) => {\n            console.log('Editor value changed:', value);\n          }}\n        />\n      </div>\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.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}