0.1.4 • Published 3 years ago
@alkhipce/editorjs-react v0.1.4
@alkhipce/editorjs-react
Demo
https://editorjs-react.vercel.app/
Installation
npm i @alkhipce/editorjs-reactUsage
// 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 |