Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/moveyourdigital/editorjs-blocks-react-renderer
📔 Renders EditorJS blocks to semantic React HTML5 components. Unnopinated and flexible.
https://github.com/moveyourdigital/editorjs-blocks-react-renderer
editorjs editorjs-component editorjs-converter editorjs-html react
Last synced: 5 days ago
JSON representation
📔 Renders EditorJS blocks to semantic React HTML5 components. Unnopinated and flexible.
- Host: GitHub
- URL: https://github.com/moveyourdigital/editorjs-blocks-react-renderer
- Owner: moveyourdigital
- License: mit
- Created: 2020-08-11T09:30:11.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2024-09-06T10:22:53.000Z (3 months ago)
- Last Synced: 2024-12-08T11:44:42.001Z (5 days ago)
- Topics: editorjs, editorjs-component, editorjs-converter, editorjs-html, react
- Language: TypeScript
- Homepage:
- Size: 2 MB
- Stars: 142
- Watchers: 4
- Forks: 12
- Open Issues: 30
-
Metadata Files:
- Readme: README.md
- Contributing: .github/CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
- awesome-editorjs - editorjs-blocks-react-renderer - React component to render blocks to semantic HTML5 tags (Libraries / JavaScript)
README
# Editor.js Blocks React Renderer
Renders Editor.js blocks to semantic React HTML5 components. Unnopinated and flexible.
[](https://www.npmjs.com/package/editorjs-blocks-react-renderer)
[](https://www.npmjs.com/package/editorjs-blocks-react-renderer)
[](https://www.npmjs.com/package/editorjs-blocks-react-renderer)
An unnopinated React library that renders flexible HTML5 React components from [Editor.js](https://editorjs.io/) block style data.
It follows semantic practices and without inlining styles. It's flexible enough to allow developers to include their own styles via CSS classes, which can be passed to each renderer via configuration.
This also supports server side rendering.
## Usage
Install the package via npm:
```sh
npm i -S editorjs-blocks-react-renderer
```
Import in your component:
```js
import Blocks from 'editorjs-blocks-react-renderer';
```
Use it with a [block style data](https://editorjs.io/saving-data) from Editor.js:
```jsx
export const Article = () => ;
```
## Render a single block
Blocks are independent and you can import only a set of them and use them diretly:
```jsx
import { Header } from 'editorjs-react-renderer';
const dataHeader: HeaderBlockData = {
text: "Heading 2",
level: 2
}
export const Heading () => ;
```
## Internal blocks
The package ships with the following renderers, but you can include your custom ones:
- Code
- Header
- Paragraph
- Image
- SimpleImage
- Embed
- List
- NestedList
- Table
- Quote
- Delimiter
- Raw (HTML)
## Styling and optional configs
This library does not include/force any style nor inlines any styles. Before you ask, we're not supporting inline styles due to [Content-Security-Policy](https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP) requirements.
However, each renderer supports a set of props, including `className` which can be used to style each block. You just need to pass a `config` object to `Blocks` or directly to any renderer like so:
```jsx
```
The example above uses [TailwindCSS](https://tailwindcss.com/) classes, replacing the default ones, which you can find below:
```js
const defaultConfigs = {
code: {
className: ""
},
delimiter: {
className: ""
},
embed: {
className: "",
rel: "noreferer nofollower external", // Generates an if not able to receive an "embed" property
sandbox: undefined
},
header: {
className: ""
},
image: {
className: "",
actionsClassNames: {
stretched: "image-block--stretched",
withBorder: "image-block--with-border",
withBackground: "image-block--with-background",
}
},
list: {
className: ""
},
paragraph: {
className: ""
},
quote: {
className: "",
actionsClassNames: {
alignment: "text-align-{alignment}", // This is a substitution placeholder: left or center.
}
},
table: {
className: ""
}
}
```
So, in theory, any CSS framework can work seamlessly with this library as long as you pass the correct properties.
## Custom Renderers
You can provide your own custom renderers or replace the default ones by passing a `renderers` object to the `Blocks`.
```tsx
const Checklist: RenderFn<{
items: string[]
}> = ({
data, className = ""
}) => {
return (
<>
{data?.items.map((item, i) => (
{HTMLReactParser(item)}
))}
>
)
}
export default () =>
```
## Security optimization
For `embed` block, you can pass a string of Feature-Policy directives for `sandbox` to optimize for security. Take into account that services such as YouTube won't work properly if you set those settings.
## Inspiration
- [EditorJS-React-Renderer](https://github.com/BomdiZane/EditorJS-React-Renderer) but without opinated inline styles.