EditorJS blocks render to semanticly beautiful html5 tags via React.
npm install editorjs-blocks-react-rendererRenders Editor.js blocks to semantic React HTML5 components. Unnopinated and flexible.
An unnopinated React library that renders flexible HTML5 React components from Editor.js 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.
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 from Editor.js:
`jsx`
export const Article = () =>
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 () =>
`
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)
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 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`
className: "language-js"
},
delimiter: {
className: "border border-2 w-16 mx-auto"
},
embed: {
className: "border-0"
},
header: {
className: "font-bold"
},
image: {
className: "w-full max-w-screen-md",
actionsClassNames: {
stretched: "w-full h-80 object-cover",
withBorder: "border border-2",
withBackground: "p-2",
}
},
list: {
className: "list-inside"
},
paragraph: {
className: "text-base text-opacity-75",
actionsClassNames: {
alignment: "text-{alignment}", // This is a substitution placeholder: left or center.
}
},
quote: {
className: "py-3 px-5 italic font-serif"
},
table: {
className: "table-auto"
}
}} />
The example above uses TailwindCSS 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.
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) => (
export default () =>
}} />
`
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.
- EditorJS-React-Renderer but without opinated inline styles.