use-codemirror
Add the excellent CodeMirror editor to your React app with a hook.
📌 Supports multiple documents (e.g. for tabbed editors)
📌 Built with TypeScript
📌 Works with SSR
📌 Built-in lazy loading for CodeMirror itself
📌 Allows easy access to the underlying instance
Getting started
yarn add use-codemirror
Create your own Editor component by calling useCodeMirror
, then passing the returned object's ref
to a <pre>
containing your initial value.
import useCodeMirror from 'use-codemirror' { let codeMirror = return <StyledCodeMirrorEditor = => <pre = => optionsvalue </pre> </StyledCodeMirrorEditor> }
Then use your Editor:
{ let code setCode = return <CodeMirrorEditor value=code onChange=setCode // Supports multiple documents with their own history, // and automatic syntax highlighting via file extension. docName="test.js" // Pass config to CodeMirror itself config= autoCloseBrackets: false /> ;}
See the example
directory for a working example.
API
You can pass in the following settings:
The returned codeMirror
object has the following shape:
Acknowledgements
This projects takes a lot of inspiration (and a bit of code) from react-codemirror2.
License
use-codemirror is MIT licensed.