{"id":13602500,"url":"https://github.com/jamesknelson/use-codemirror","last_synced_at":"2025-04-07T22:32:11.292Z","repository":{"id":57387923,"uuid":"219480736","full_name":"jamesknelson/use-codemirror","owner":"jamesknelson","description":"CodeMirror support for React","archived":false,"fork":false,"pushed_at":"2019-12-10T11:29:40.000Z","size":244,"stargazers_count":68,"open_issues_count":2,"forks_count":3,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-03-18T15:46:35.034Z","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/jamesknelson.png","metadata":{"files":{"readme":"README.md","changelog":null,"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":"2019-11-04T11:00:47.000Z","updated_at":"2023-10-13T18:02:42.000Z","dependencies_parsed_at":"2022-08-31T21:14:27.836Z","dependency_job_id":null,"html_url":"https://github.com/jamesknelson/use-codemirror","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jamesknelson%2Fuse-codemirror","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jamesknelson%2Fuse-codemirror/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jamesknelson%2Fuse-codemirror/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jamesknelson%2Fuse-codemirror/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jamesknelson","download_url":"https://codeload.github.com/jamesknelson/use-codemirror/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247741245,"owners_count":20988361,"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-08-01T18:01:25.569Z","updated_at":"2025-04-07T22:32:06.281Z","avatar_url":"https://github.com/jamesknelson.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"# use-codemirror\n\n\u003ca href=\"https://www.npmjs.com/package/use-codemirror\"\u003e\u003cimg alt=\"NPM\" src=\"https://img.shields.io/npm/v/use-codemirror.svg\"\u003e\u003c/a\u003e\n\n**Add the excellent [CodeMirror](https://codemirror.net/) editor to your React app with a hook.**\n\n📌 Supports multiple documents (e.g. for tabbed editors)\u003cbr /\u003e\n📌 Built with TypeScript \u003cbr /\u003e\n📌 Works with SSR\u003cbr /\u003e\n📌 Built-in lazy loading for CodeMirror itself\u003cbr /\u003e\n📌 Allows easy access to the underlying instance\u003cbr /\u003e\n\n## Getting started\n\n```bash\nyarn add use-codemirror\n```\n\nCreate your own Editor component by calling `useCodeMirror`, then passing the returned object's `ref` to a `\u003cpre\u003e` containing your initial value.\n\n```jsx\nimport { useCodeMirror } from 'use-codemirror'\n\nexport function Editor({ className, style, ...options }) {\n  let codeMirror = useCodeMirror(options)\n\n  return (\n    \u003cStyledCodeMirrorEditor className={className} style={style}\u003e\n      \u003cpre ref={codeMirror.ref} className={codeMirror.config.theme}\u003e\n        {options.value}\n      \u003c/pre\u003e\n    \u003c/StyledCodeMirrorEditor\u003e\n  )\n}\n```\n\nThen use your Editor:\n\n```js\nfunction App() {\n  let [code, setCode] = useState(initialCode)\n\n  return (\n      \u003cCodeMirrorEditor\n        value={code}\n        onChange={setCode}\n\n        // Supports multiple documents with their own history,\n        // and automatic syntax highlighting via file extension.\n        docName=\"test.js\"\n\n        // Pass config to CodeMirror itself\n        config={{\n          autoCloseBrackets: false,\n        }}\n      /\u003e\n  );\n}\n```\n\nSee the `example` directory for a working example.\n\n## API\n\nYou can pass in the following settings:\n\n```typescript\ninterface UseCodeMirrorOptions {\n  cursor?: CodeMirror.Position\n  doc?: CodeMirror.Doc\n  docName?: string\n  scroll?: SetScrollOptions\n  selection?: { ranges: Array\u003cSetSelectionOptions\u003e; focus?: boolean }\n  value: string\n\n  config?: CodeMirror.EditorConfiguration\n\n  onBlur?: () =\u003e void\n  onChange?: (\n    value: string,\n    docName: string | undefined,\n    changes: CodeMirror.EditorChange[],\n    doc: CodeMirror.Doc,\n  ) =\u003e void\n  onCursor?: (data: CodeMirror.Position) =\u003e void\n  onFocus?: () =\u003e void\n  onGutterClick?: (lineNumber: number, gutter: string, event: Event) =\u003e void\n  onScroll?: (scrollInfo: CodeMirror.ScrollInfo) =\u003e void\n  onSelection?: (data: any) =\u003e void\n  onViewportChange?: (start: number, end: number) =\u003e void\n\n  // Only used on initial run\n  importCodeMirror?: () =\u003e Promise\u003cany\u003e\n  importCodeMirrorAddons?: () =\u003e Promise\u003cany\u003e\n}\n```\n\nThe returned `codeMirror` object has the following shape:\n\n```typescript\ninterface ReactCodeMirror {\n  // Pass this to a `\u003cpre\u003e` to turn it into a CodeMirror\n  ref: CodeMirrorRefFunction\n\n  // The configuration, with any default settings\n  config: CodeMirror.EditorConfiguration\n\n  // The underlying CodeMirror instance\n  editor?: CodeMirror.Editor\n\n  focus(): void\n}\n```\n\n## Acknowledgements\n\nThis projects takes a lot of inspiration (and a bit of code) from [react-codemirror2](https://github.com/scniro/react-codemirror2/blob/a633e7dd673ddf5bdb07e2ed664a03aa47159bfa/src/index.tsx).\n\n## License\n\nuse-codemirror is MIT licensed.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjamesknelson%2Fuse-codemirror","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjamesknelson%2Fuse-codemirror","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjamesknelson%2Fuse-codemirror/lists"}