Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/etozhealkhipce/editorjs-react
https://github.com/etozhealkhipce/editorjs-react
Last synced: 3 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/etozhealkhipce/editorjs-react
- Owner: etozhealkhipce
- License: mit
- Created: 2022-05-09T09:39:16.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2023-09-16T09:34:50.000Z (about 1 year ago)
- Last Synced: 2024-07-22T04:46:26.910Z (4 months ago)
- Language: TypeScript
- Size: 1.44 MB
- Stars: 9
- Watchers: 2
- Forks: 2
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-editorjs - editorjs-react
README
# @alkhipce/editorjs-react
[](https://www.npmjs.com/package/@alkhipce/editorjs-react)
[](https://github.com/etozhealkhipce/editorjs-react)
[](https://editorjs-react.vercel.app/)
## Demo
#### https://editorjs-react.vercel.app/
## Installation
```shell
npm i @alkhipce/editorjs-react
```
## Usage
```javascript
// import Parser component or import certain component like this (available components list below)
import { Parser, Table } from '@alkhipce/editorjs-react';
const App = () => {
return (
<>
;
>
);
};
```
## 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 |