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)
; ... const App = { return <EditorRendererProvider data=data /> ;}; ;
... or using CommonJS syntax:
const EditorRendererProvider = ; ... const App = { return <EditorRendererProvider data=data /> ;}; ;
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.
; ... const customStyle = header: textAlign: 'left' color: '#CECECE' ...; <EditorRendererProvider data=data style=customStyle />
You can also disable the default style like so:
; ... 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.
; ... const Header = { return <div>datatext</div> } <EditorRendererProvider data=data components= name: 'header' component: Header />
License
React EditorJS Renderer is open source software licensed as MIT.