https://github.com/jamesknelson/use-codemirror
CodeMirror support for React
https://github.com/jamesknelson/use-codemirror
Last synced: 11 months ago
JSON representation
CodeMirror support for React
- Host: GitHub
- URL: https://github.com/jamesknelson/use-codemirror
- Owner: jamesknelson
- License: mit
- Created: 2019-11-04T11:00:47.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2019-12-10T11:29:40.000Z (about 6 years ago)
- Last Synced: 2025-03-18T15:46:35.034Z (12 months ago)
- Language: JavaScript
- Size: 238 KB
- Stars: 68
- Watchers: 4
- Forks: 3
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-list - use-codemirror
README
# use-codemirror
**Add the excellent [CodeMirror](https://codemirror.net/) 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
```bash
yarn add use-codemirror
```
Create your own Editor component by calling `useCodeMirror`, then passing the returned object's `ref` to a `
` containing your initial value.
```jsx
import { useCodeMirror } from 'use-codemirror'
export function Editor({ className, style, ...options }) {
let codeMirror = useCodeMirror(options)
return (
{options.value}
)
}
```
Then use your Editor:
```js
function App() {
let [code, setCode] = useState(initialCode)
return (
);
}
```
See the `example` directory for a working example.
## API
You can pass in the following settings:
```typescript
interface UseCodeMirrorOptions {
cursor?: CodeMirror.Position
doc?: CodeMirror.Doc
docName?: string
scroll?: SetScrollOptions
selection?: { ranges: Array; focus?: boolean }
value: string
config?: CodeMirror.EditorConfiguration
onBlur?: () => void
onChange?: (
value: string,
docName: string | undefined,
changes: CodeMirror.EditorChange[],
doc: CodeMirror.Doc,
) => void
onCursor?: (data: CodeMirror.Position) => void
onFocus?: () => void
onGutterClick?: (lineNumber: number, gutter: string, event: Event) => void
onScroll?: (scrollInfo: CodeMirror.ScrollInfo) => void
onSelection?: (data: any) => void
onViewportChange?: (start: number, end: number) => void
// Only used on initial run
importCodeMirror?: () => Promise
importCodeMirrorAddons?: () => Promise
}
```
The returned `codeMirror` object has the following shape:
```typescript
interface ReactCodeMirror {
// Pass this to a `
` to turn it into a CodeMirror
ref: CodeMirrorRefFunction
// The configuration, with any default settings
config: CodeMirror.EditorConfiguration
// The underlying CodeMirror instance
editor?: CodeMirror.Editor
focus(): void
}
```
## Acknowledgements
This 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).
## License
use-codemirror is MIT licensed.