Use-editor-js NPM

A fully customized ReactJS hook for EditorJS. Add it quickly to your apps and use your own React components to render it beautifully for each block.

Installation

// with npm
npm install use-editor-js

// with yarn
yarn add use-editor-js

Usage

import { useEditor } from 'use-editor-js'

const App = () => {
  useEditor({
    holder: 'editor'
  })

  return <div id='editor'/>
}

ReactDOM.render(<App />, document.querySelector('#app'));

API

Name	Type	Default	Description
`holder`	`string`	`empty`	*Required.* Id of Element that should contain the Editor.
`placeholder`	`string`	`empty`	Text to be rendered if you want a custom placehodler.
`autoFocus`	`boolean`	`false`	Option to focus the first block automatically after initialization.
`readOnly`	`boolean`	`false`	Disable edition and display editor on read mode.
`data`	`object`	`null`	To initialize the editor with saved data, pass it through the data property.
`tools`	object	`empty`	Object with settings for each tool you want to use. See Tools section for more details.

Tools

Available tools:

List;
Paragraph;
Image.

Inline toolbar:

Bold;
Italic;
Link;
Superscript;
Subscript.

Too add tools to the editor, you must inform it inside the tools property:

 useEditor({
    // other configurations...
    tools: {
      image: {
        config: {
          element: ImageComponent,
          initialValues: {
            url: ''
          },
          icon: ImageIcon
        }
      }
    }
  })

By now, only Image tool must receive an element and initialValues property, the other tools have an optional icon property.

Also, there is a onChange method that is passed to the element, with the following signature:

onChange(name: string, value: string): void

This is used to bind the internal plugin value with the React component. Again, the only exception is the Paragraph tool.

Tool configuration

Name	Type	Default	Description
`element`	`React.FC`	`empty`	*Required, only Image tool.* Component that will be rendered inside the block.
`initialValues`	`object`	`{}`	The initial values when the block is created.
`icon`	`React.FC`	Plugin default icon.	The custom icon to render inside the toolbar.

Notes

The injected React components override EditorJS default behavior, which means that every logic found on its plugins will not work with this solution. You MUST handle everything inside your React components, otherwise, it will not work as expected.