React Editorjs Renderer

Render block style in React hassle less.

• Webpack module bundlers.
• See the demo.

A library for rendering styled, responsive, and flexible React components from block style data objects generated by codex editors like Editor.js.

Quickstart

1. Install

npm install react-editorjs-renderer

... or using yarn

yarn add react-editorjs-renderer

2. Import EditorRendererProvider to your React App (ES6 module syntax)

import EditorRendererProvider from 'react-editorjs-renderer';
 
...
 
const App = () => {
  return (
    <EditorRendererProvider data={data} />
  );
};
 
export default App;

... or using CommonJS syntax:

const EditorRendererProvider = require('react-editorjs-renderer');
 
...
 
const App = () => {
  return (
    <EditorRendererProvider data={data} />
  );
};
 
export default App;

For custom styling, and other options read on ...

API

Custom styling

You can style all supported components by passing a style prop to the EditorRendererProvider component. An object whose keys correspond to the names of the supported blocks you intend to style.

import EditorRendererProvider from 'react-editorjs-renderer';
 
...
 
const customStyle = {
  header: {
    textAlign: 'left',
    color: '#CECECE',
  },
  ...
};
 
<EditorRendererProvider data={data} style={customStyle} />

You can also disable the default style like so:

import EditorRendererProvider from 'react-editorjs-renderer';
 
...
 
const customStyle = {
  // disable style globally
  disable: true,
  ...
  header: {
    // disable style for a specific component
    disable: true,
  }
  ...
};
 
<EditorRendererProvider data={data} style={customStyle} />

Register custom component

You can add your own component for any block style type you want. The custom component must have the data props. See the example.

import EditorRendererProvider from 'react-editorjs-renderer';
 
...
 
const Header = ({ data }) => {
  return (
    <div>{data.text}</div>
  )
}
 
<EditorRendererProvider
  data={data}
  components={[
    {
      name: 'header',
      component: Header
    } 
  ]}
/>

License

React EditorJS Renderer is open source software licensed as MIT.