![PyPI Now Supports iOS and Android Wheels for Mobile Python Development](https://cdn.sanity.io/images/cgdhsj6q/production/96416c872705517a6a65ad9646ce3e7caef623a0-1024x1024.webp?w=400&fit=max&auto=format)
Security News
PyPI Now Supports iOS and Android Wheels for Mobile Python Development
PyPI now supports iOS and Android wheels, making it easier for Python developers to distribute mobile packages.
editorjs-blocks-react-renderer
Advanced tools
EditorJS blocks renderer to semanticly beautiful html5 tags via React.
Renders 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:
npm i -S editorjs-blocks-react-renderer
Import in your component:
import Blocks from 'editorjs-blocks-react-renderer';
Use it with a block style data from Editor.js:
export const Article = () => <Blocks data={dataFromEditor} />;
Blocks are independent and you can import only a set of them and use them diretly:
import { Header } from 'editorjs-react-renderer';
const dataHeader = {
"text": "Heading 2",
"level": 2
}
export const Heading () => <Header data={dataHeader} />;
The package ships with the following renderers, but you can include your custom ones:
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:
<Blocks data={dataFromEditor} config={{
code: {
className: "language-js"
},
delimiter: {
className: "article-hr"
},
embed: {
className: "styled-iframe"
}
header: {
className: "lead"
},
image: {
className: "img-fluid"
},
list: {
className: "unstyled-list"
},
paragraph: {
className: "lead"
},
quote: {
className: "block-quote"
},
table: {
className: "table"
}
}} />
Below are the defaults for each renderer:
const defaultConfigs = {
code: {
className: ""
},
delimiter: {
className: ""
},
embed: {
className: "styled-iframe",
rel: "noreferer nofollower external", // Generates an <a> 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: "table"
}
}
So, in theory, any CSS framework (such as Bootstrap) 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
.
const Checklist = ({
data, className = ""
}: {
data: {[s:string]: any}
className?: string
}) => {
return (
<>
{data?.items.map((item, i) => (
<p key={i}>
<label>
<input type="checkbox" /> {ReactHtmlParser(item)}
</label>
</p>
))}
</>
)
}
export default () => <Blocks data={dataFromEditor} renderers={{
checklist: Checklist
}} />
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.
FAQs
EditorJS blocks render to semanticly beautiful html5 tags via React.
The npm package editorjs-blocks-react-renderer receives a total of 2,986 weekly downloads. As such, editorjs-blocks-react-renderer popularity was classified as popular.
We found that editorjs-blocks-react-renderer demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
PyPI now supports iOS and Android wheels, making it easier for Python developers to distribute mobile packages.
Security News
Create React App is officially deprecated due to React 19 issues and lack of maintenance—developers should switch to Vite or other modern alternatives.
Security News
Oracle seeks to dismiss fraud claims in the JavaScript trademark dispute, delaying the case and avoiding questions about its right to the name.