@alkhipce/editorjs-react

Demo

https://editorjs-react.vercel.app/

Installation

npm i @alkhipce/editorjs-react

Usage

// import Parser component or import certain component like this (available components list below)
import { Parser, Table } from '@alkhipce/editorjs-react';

const App = () => {
  return (
    <>
      <Parser data={EDITORJS_DATA} />
      <Table content={EDITORJS_DATA} withHeadings={false} />;
    </>
  );
};

Available components

Code

| Props | Description | Type | Default | | ----- | ---------------------------------- | ------ | ------- | | code | display code in preformatted style | string | - |

Delimiter

| Props | Description | Type | Default | | ----- | ----------- | ---- | ------- | | - | - | - | - |

Header

| Props | Description | Type | Default | | ----- | ------------------ | ------------ | ------- | | level | heading text level | number (1-6) | 1 | | text | your text | string | - |

Image

| Props | Description | Type | Default | | -------------- | ----------------------- | ------------------------------ | ------- | | file | contains image info | object with field url: string; | - | | caption | image caption | string or undefined | - | | withBorder | add border around image | boolean or undefined | false | | stretched | stretch image | boolean or undefined | false | | withBackground | add image background | boolean or undefined | false |

List

| Props | Description | Type | Default | | ----- | ----------------------------------- | ------------------------------- | ----------- | | items | list items | string array | [] | | style | set ordered or unordered list style | 'ordered' or 'unordered' string | 'unordered' |

Paragraph

| Props | Description | Type | Default | | ----- | ----------- | ------ | ------- | | text | your text | string | - |

Quote

| Props | Description | Type | Default | | --------- | ------------------- | ------------------------- | ------- | | text | your text | string | - | | caption | quote caption | string | - | | alignment | set quote alignment | 'left' or 'center' string | 'left' |

RawTool

| Props | Description | Type | Default | | ----- | ----------- | ------ | ------- | | html | your code | string | - |

Table

| Props | Description | Type | Default | | ------------ | ------------------ | ---------- | ------- | | content | table data | string[][] | - | | withHeadings | add table headings | boolean | false |