{"id":13437008,"url":"https://github.com/JedWatson/react-codemirror","last_synced_at":"2025-03-19T06:30:30.473Z","repository":{"id":32436901,"uuid":"36015016","full_name":"JedWatson/react-codemirror","owner":"JedWatson","description":"Codemirror Component for React.js","archived":false,"fork":false,"pushed_at":"2020-09-30T18:54:10.000Z","size":1499,"stargazers_count":1560,"open_issues_count":68,"forks_count":263,"subscribers_count":23,"default_branch":"master","last_synced_at":"2025-03-08T08:42:55.343Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/JedWatson.png","metadata":{"files":{"readme":"README.md","changelog":"HISTORY.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2015-05-21T13:41:51.000Z","updated_at":"2025-02-21T06:40:30.000Z","dependencies_parsed_at":"2022-08-08T05:00:14.726Z","dependency_job_id":null,"html_url":"https://github.com/JedWatson/react-codemirror","commit_stats":null,"previous_names":[],"tags_count":16,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JedWatson%2Freact-codemirror","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JedWatson%2Freact-codemirror/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JedWatson%2Freact-codemirror/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JedWatson%2Freact-codemirror/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/JedWatson","download_url":"https://codeload.github.com/JedWatson/react-codemirror/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244166716,"owners_count":20409178,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-07-31T03:00:53.696Z","updated_at":"2025-03-19T06:30:30.119Z","avatar_url":"https://github.com/JedWatson.png","language":"JavaScript","readme":"# Codemirror\n\nThe excellent [CodeMirror](https://codemirror.net) editor as a [React.js](http://facebook.github.io/react) component.\n\n\n## Demo \u0026 Examples\n\nLive demo: [JedWatson.github.io/react-codemirror](http://JedWatson.github.io/react-codemirror)\n\nTo build the examples locally, run:\n\n```\nnpm install\nnpm start\n```\n\nThen open [`localhost:8000`](http://localhost:8000) in a browser.\n\n\n## Installation\n\nThe easiest way to use codemirror is to install it from NPM and include it in your own React build process (using [Browserify](http://browserify.org), [Webpack](http://webpack.github.io/), etc).\n\nYou can also use the standalone build by including `dist/react-codemirror.js` in your page. If you use this, make sure you have already included React, and it is available as a global variable.\n\n```\nnpm install react-codemirror --save\n```\n\n\n## Usage\n\nRequire the CodeMirror component and render it with JSX:\n\n```javascript\nvar React = require('react');\nvar CodeMirror = require('react-codemirror');\n\nvar App = React.createClass({\n\tgetInitialState: function() {\n\t\treturn {\n\t\t\tcode: \"// Code\",\n\t\t};\n\t},\n\tupdateCode: function(newCode) {\n\t\tthis.setState({\n\t\t\tcode: newCode,\n\t\t});\n\t},\n\trender: function() {\n\t\tvar options = {\n\t\t\tlineNumbers: true,\n\t\t};\n\t\treturn \u003cCodeMirror value={this.state.code} onChange={this.updateCode} options={options} /\u003e\n\t}\n});\n\nReact.render(\u003cApp /\u003e, document.getElementById('app'));\n```\n\n### Include the CSS\n\nEnsure that CodeMirror's stylesheet `codemirror.css` is loaded.\n\nIf you're using LESS (similar for Sass) you can import the css directly from the codemirror package, as shown in [example.less](example/src/example.less):\n\n```less\n@import (inline) \"./node_modules/codemirror/lib/codemirror.css\";\n```\n\nIf you're using Webpack with the css loader, you can require the codemirror css in your application instead:\n\n```js\nrequire('codemirror/lib/codemirror.css');\n```\n\nAlternatively, you can explicitly link the `codemirror.css` file from the CodeMirror project in your index.html file, e.g `\u003clink href=\"css/codemirror.css\"  rel=\"stylesheet\"\u003e`.\n\n### Methods\n\n* `focus` focuses the CodeMirror instance\n* `getCodeMirror` returns the CodeMirror instance, available .\n\nYou can interact with the CodeMirror instance using a `ref` and the `getCodeMirror()` method after the `componentDidMount` lifecycle event has fired (including inside the `componentDidMount` event in a parent Component).\n\n### Properties\n\n* `autoFocus` `Boolean` automatically focuses the editor when it is mounted (default false)\n* `autoSave` `Boolean` automatically persist changes to underlying textarea (default false)\n* `className` `String` adds a custom css class to the editor\n* `codeMirrorInstance` `Function` provides a specific CodeMirror instance (defaults to `require('codemirror')`)\n* `defaultValue` `String` provides a default (not change tracked) value to the editor\n* `name` `String` sets the name of the editor input field\n* `options` `Object` options passed to the CodeMirror instance\n* `onChange` `Function (newValue)` called when a change is made\n* `onCursorActivity` `Function (codemirror)` called when the cursor is moved\n* `onFocusChange` `Function (focused)` called when the editor is focused or loses focus\n* `onScroll` `Function (scrollInfo)` called when the editor is scrolled\n* `preserveScrollPosition` `Boolean=false` preserve previous scroll position after updating value\n* `value` `String` the editor value\n\nSee the [CodeMirror API Docs](https://codemirror.net/doc/manual.html#api) for the available options.\n\n### Using Language Modes\n\nSeveral [language modes](https://codemirror.net/mode/) are included with CodeMirror for syntax highlighting.\n\nBy default (to optimise bundle size) all modes are not included. To enable syntax highlighting:\n\n* install the `codemirror` package dependency (in addition to `react-codemirror`)\n* require the language modes you wish to make available _after_ you require `react-codemirror` itself\n* set the `mode` option in the `options` object\n\n```js\nvar React = require('react');\nvar CodeMirror = require('react-codemirror');\nrequire('codemirror/mode/javascript/javascript');\nrequire('codemirror/mode/xml/xml');\nrequire('codemirror/mode/markdown/markdown');\n\n\u003cCodeMirror ... options={{\n\tmode: 'javascript',\n}} /\u003e\n```\n\nSee the [example source](https://github.com/JedWatson/react-codemirror/blob/master/example/src/example.js) for a reference implementation including JavaScript and markdown syntax highlighting.\n\n### License\n\nCopyright (c) 2016 Jed Watson. [MIT](LICENSE) Licensed.\n","funding_links":[],"categories":["Uncategorized","JavaScript","UI Components","Demos","\u003csummary\u003eUI Components\u003c/summary\u003e","Removed components"],"sub_categories":["Uncategorized","Form Components","Miscellaneous"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FJedWatson%2Freact-codemirror","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FJedWatson%2Freact-codemirror","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FJedWatson%2Freact-codemirror/lists"}