Editorjs React Tailwind Renderer

kasuta96

EditorJs-React-Tailwind-Renderer

A library for rendering Tailwindcss styled React components from block style data objects like those generated by codex editors like Editor.js.

Getting Started

Add to your module/application

import Output from 'EditorJs-React-Tailwind-Renderer';

Output accepts a block style data object as prop

const data = {
  "time": 1564767102436,
  "blocks": [
    {
      "type" : "header",
      "data" : {
        "level" : 4,
        "text" : "Editor.js React Renderer"
      }
    },
    {
      "type": "image",
      "data": {
        "file": {
          "url": "https://cdn1.imggmi.com/uploads/2019/8/24/fdbf3465641e401ebe0ec58d278656d1-full.jpg"
        },
        "caption": "Test Caption",
        "withBorder": false,
        "stretched": false,
        "withBackground": false
      }
    },
    {
      "type": "paragraph",
      "data": {
        "text": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloremque accusantium veritatis dolorum cum amet! Ipsa ullam nisi, dolor explicabo ut nobis repudiandae saepe illo error facilis consectetur, quisquam assumenda dolorum."
      }
    },
    ...
  ],
  "version": "2.14.0"
};

The time and version properties are not required. Only the blocks array is required

Notice that your block data can also be HTML markup. Pass your block style data to Output() and ERR will take care of the rest :)

const Post = () => <section><Output data={ data } /></section>;

export default Post;

Render Single Block

Sometimes you might want to render just a single component like a paragraph or header. While this is possible with the Output component, you should consider using one of the more specific block output components.

import { ListOutput } from 'EditorJs-React-Tailwind-Renderer';

const listData = {
  "items" : ["Item one", "Another item", "Item 3"],
  "style" : "unordered" // ordered or unordered
};

const Todo = () => <ListOutput data={ listData } />;

export default Todo;

Server Side Rendering

There is full support for SSR

Supported blocks

Author

@kasuta96

Custom from EditorJS-React Renderer (ERR)

Top categories