https://github.com/natterstefan/react-editor-js
⚛️📝 The unofficial react component for editorjs (https://editorjs.io/). Install: npm i @natterstefan/react-editor-js --save
https://github.com/natterstefan/react-editor-js
editor-js-component editorjs editorjs-component react-editor react-editor-js react-editorjs typescript wysiwyg-editor wysiwyg-js-editor
Last synced: about 1 month ago
JSON representation
⚛️📝 The unofficial react component for editorjs (https://editorjs.io/). Install: npm i @natterstefan/react-editor-js --save
- Host: GitHub
- URL: https://github.com/natterstefan/react-editor-js
- Owner: natterstefan
- License: mit
- Created: 2019-11-09T17:34:55.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2020-07-13T22:35:52.000Z (almost 5 years ago)
- Last Synced: 2025-04-10T01:14:33.990Z (about 1 month ago)
- Topics: editor-js-component, editorjs, editorjs-component, react-editor, react-editor-js, react-editorjs, typescript, wysiwyg-editor, wysiwyg-js-editor
- Language: TypeScript
- Homepage: https://react-editor-js.netlify.com/
- Size: 796 KB
- Stars: 27
- Watchers: 2
- Forks: 3
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Codeowners: .github/CODEOWNERS
Awesome Lists containing this project
README
# react-editor-js
[](https://badge.fury.io/js/%40natterstefan%2Freact-editor-js)
[](https://travis-ci.com/natterstefan/react-editor-js)
[](https://cypress.io)
[](http://commitizen.github.io/cz-cli/)
[](https://app.netlify.com/sites/react-editor-js/deploys)
Unofficial react component for Editor.js ([https://editorjs.io/][1]).
## Demo
You can see [react-editor-js](https://github.com/natterstefan/react-editor-js)
in action on both [codesandbox](https://codesandbox.io/s/react-editor-js-example-m9e49)
and [netlify](https://react-editor-js.netlify.com/).
## Getting started
```sh
npm i @natterstefan/react-editor-js --save
# or
yarn add @natterstefan/react-editor-js
```
## PeerDependencies
You have to install the required peerDependencies (eg. `React >= 16.8`), which
are listed by the command:
```sh
npm info "@natterstefan/react-editor-js@latest" peerDependencies
```
If using npm 5+, use this shortcut:
```sh
npx install-peerdeps --dev @natterstefan/react-editor-js
# or
yarn add @natterstefan/react-editor-js -D --peer
```
## Usage
```jsx
// index.js
import EditorJs from '@natterstefan/react-editor-js'
const App = () => {
return
}
```
Whereas `data` looks similar to this [example](cypress/fixtures/data.ts). It is
based on the example output presented on [editorjs.io][1].
### Configuration
`EditorJs` passes all given props straight to the `editorjs` instance. It is
basically just a wrapper component in React. Take a look at the
[configuration page in the editor.js documentation](https://editorjs.io/configuration)
for more details.
#### Advanced example with callbacks, custom element and instance access
```jsx
// index.js
import EditorJs from '@natterstefan/react-editor-js'
const App = () => {
const editor = null
const onReady = () => {
// https://editorjs.io/configuration#editor-modifications-callback
console.log('Editor.js is ready to work!')
}
const onChange = () => {
// https://editorjs.io/configuration#editor-modifications-callback
console.log("Now I know that Editor's content changed!")
}
const onSave = async () => {
// https://editorjs.io/saving-data
try {
const outputData = await editor.save()
console.log('Article data: ', outputData)
} catch (e) {
console.log('Saving failed: ', e)
}
}
return (
Save
{/* docs: https://editorjs.io/configuration */}
{
// invoked once the editorInstance is ready
editor = editorInstance
}}
>
)
}
```
## Plugins / Tools
If you want to add [more tools](https://editorjs.io/getting-started#tools-installation)
simply pass a `tools` property to the `EditorJs` component:
```jsx
// index.js
import EditorJs from '@natterstefan/react-editor-js'
import Header from '@editorjs/header'
const App = () => {
return
}
```
`EditorJs` already comes with a basic config for [@editorjs/paragraph](https://www.npmjs.com/package/@editorjs/paragraph)
and [@editorjs/header](https://www.npmjs.com/package/@editorjs/header). Take a
look on their [Github](https://github.com/editor-js) page to find more available
plugins (or take a look at [the storybook example](src/__stories__/config.ts)).
## Additional Props
| Name | Type | Default | Description |
| :------------------------ | :-------: | :-----: | :----------------------------------------------------------------------------------------------------------------------- |
| reinitializeOnPropsChange | `boolean` | `false` | editor-js is initialised again on [componentDidUpdate](https://reactjs.org/docs/react-component.html#componentdidupdate) |
## References
- [Debug GitHub Action with tmate](https://github.com/marketplace/actions/debugging-with-tmate)
## Licence
[MIT](LICENCE)
This project is not affiliated, associated, authorized, endorsed by or in any
way officially connected to EditorJS ([editorjs.io](https://editorjs.io/)).
## Contributors ✨
Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):
This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!
[1]: https://editorjs.io/
