Nukem's Possible Manifestation

    react-editorjs-renderer

    2.4.2 • Public • Published

    React Editorjs Renderer NPM JavaScript Style Guide

    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.

    Install

    npm i react-editorjs-renderer

    DownloadsWeekly Downloads

    48

    Version

    2.4.2

    License

    MIT

    Unpacked Size

    1.72 MB

    Total Files

    84

    Last publish

    Collaborators

    • antoineaudrain