{"id":13469571,"url":"https://github.com/moveyourdigital/editorjs-blocks-react-renderer","last_synced_at":"2025-04-05T08:06:55.313Z","repository":{"id":40511109,"uuid":"286702567","full_name":"moveyourdigital/editorjs-blocks-react-renderer","owner":"moveyourdigital","description":"📔 Renders EditorJS blocks to semantic React HTML5 components. Unnopinated and flexible.","archived":false,"fork":false,"pushed_at":"2024-09-06T10:22:53.000Z","size":2098,"stargazers_count":146,"open_issues_count":30,"forks_count":12,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-03-28T09:02:32.302Z","etag":null,"topics":["editorjs","editorjs-component","editorjs-converter","editorjs-html","react"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/moveyourdigital.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":".github/CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-08-11T09:30:11.000Z","updated_at":"2025-03-23T16:18:26.000Z","dependencies_parsed_at":"2024-06-18T17:07:14.411Z","dependency_job_id":"e8da515a-b79a-4daa-b1ae-90b04d6f9488","html_url":"https://github.com/moveyourdigital/editorjs-blocks-react-renderer","commit_stats":{"total_commits":69,"total_committers":5,"mean_commits":13.8,"dds":"0.14492753623188404","last_synced_commit":"969540e7a5d346f4bbe3aebe7d6d861910f1d4ab"},"previous_names":[],"tags_count":9,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/moveyourdigital%2Feditorjs-blocks-react-renderer","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/moveyourdigital%2Feditorjs-blocks-react-renderer/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/moveyourdigital%2Feditorjs-blocks-react-renderer/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/moveyourdigital%2Feditorjs-blocks-react-renderer/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/moveyourdigital","download_url":"https://codeload.github.com/moveyourdigital/editorjs-blocks-react-renderer/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247305934,"owners_count":20917208,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["editorjs","editorjs-component","editorjs-converter","editorjs-html","react"],"created_at":"2024-07-31T15:01:45.437Z","updated_at":"2025-04-05T08:06:55.277Z","avatar_url":"https://github.com/moveyourdigital.png","language":"TypeScript","funding_links":[],"categories":["TypeScript","Libraries"],"sub_categories":["JavaScript"],"readme":"# Editor.js Blocks React Renderer\n\nRenders Editor.js blocks to semantic React HTML5 components. Unnopinated and flexible.\n\n[![](https://flat.badgen.net/npm/v/editorjs-blocks-react-renderer)](https://www.npmjs.com/package/editorjs-blocks-react-renderer)\n[![](https://flat.badgen.net/npm/license/editorjs-blocks-react-renderer)](https://www.npmjs.com/package/editorjs-blocks-react-renderer)\n[![](https://flat.badgen.net/npm/types/editorjs-blocks-react-renderer)](https://www.npmjs.com/package/editorjs-blocks-react-renderer)\n\nAn unnopinated React library that renders flexible HTML5 React components from [Editor.js](https://editorjs.io/) block style data.\n\nIt 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.\n\nThis also supports server side rendering.\n\n## Usage\n\nInstall the package via npm:\n```sh\nnpm i -S editorjs-blocks-react-renderer\n```\n\nImport in your component:\n```js\nimport Blocks from 'editorjs-blocks-react-renderer';\n```\n\nUse it with a [block style data](https://editorjs.io/saving-data) from Editor.js:\n```jsx\nexport const Article = () =\u003e \u003cBlocks data={dataFromEditor} /\u003e;\n```\n\n## Render a single block\n\nBlocks are independent and you can import only a set of them and use them diretly:\n```jsx\nimport { Header } from 'editorjs-react-renderer';\n\nconst dataHeader: HeaderBlockData = {\n  text: \"Heading 2\",\n  level: 2\n}\n\nexport const Heading () =\u003e \u003cHeader data={dataHeader} className=\"text-xl\" /\u003e;\n```\n\n## Internal blocks\n\nThe package ships with the following renderers, but you can include your custom ones:\n- Code\n- Header\n- Paragraph\n- Image\n- SimpleImage\n- Embed\n- List\n- NestedList\n- Table\n- Quote\n- Delimiter\n- Raw (HTML)\n\n## Styling and optional configs\n\nThis 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.\n\nHowever, 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:\n\n```jsx\n\u003cBlocks data={dataFromEditor} config={{\n  code: {\n    className: \"language-js\"\n  },\n  delimiter: {\n    className: \"border border-2 w-16 mx-auto\"\n  },\n  embed: {\n    className: \"border-0\"\n  },\n  header: {\n    className: \"font-bold\"\n  },\n  image: {\n    className: \"w-full max-w-screen-md\",\n    actionsClassNames: {\n      stretched: \"w-full h-80 object-cover\",\n      withBorder: \"border border-2\",\n      withBackground: \"p-2\",\n    }\n  },\n  list: {\n    className: \"list-inside\"\n  },\n  paragraph: {\n    className: \"text-base text-opacity-75\",\n    actionsClassNames: {\n      alignment: \"text-{alignment}\", // This is a substitution placeholder: left or center.\n    }\n  },\n  quote: {\n    className: \"py-3 px-5 italic font-serif\"\n  },\n  table: {\n    className: \"table-auto\"\n  }\n}} /\u003e\n```\n\nThe example above uses [TailwindCSS](https://tailwindcss.com/) classes, replacing the default ones, which you can find below:\n\n```js\nconst defaultConfigs = {\n  code: {\n    className: \"\"\n  },\n  delimiter: {\n    className: \"\"\n  },\n  embed: {\n    className: \"\",\n    rel: \"noreferer nofollower external\", // Generates an \u003ca\u003e if not able to receive an \"embed\" property\n    sandbox: undefined\n  },\n  header: {\n    className: \"\"\n  },\n  image: {\n    className: \"\",\n    actionsClassNames: {\n      stretched: \"image-block--stretched\",\n      withBorder: \"image-block--with-border\",\n      withBackground: \"image-block--with-background\",\n    }\n  },\n  list: {\n    className: \"\"\n  },\n  paragraph: {\n    className: \"\"\n  },\n  quote: {\n    className: \"\",\n    actionsClassNames: {\n      alignment: \"text-align-{alignment}\", // This is a substitution placeholder: left or center.\n    }\n  },\n  table: {\n    className: \"\"\n  }\n}\n```\n\nSo, in theory, any CSS framework can work seamlessly with this library as long as you pass the correct properties.\n\n## Custom Renderers\n\nYou can provide your own custom renderers or replace the default ones by passing a `renderers` object to the `Blocks`.\n\n```tsx\nconst Checklist: RenderFn\u003c{\n  items: string[]\n}\u003e = ({\n  data, className = \"\"\n}) =\u003e {\n\n  return (\n    \u003c\u003e\n      {data?.items.map((item, i) =\u003e (\n        \u003cp key={i} className={className}\u003e\n          \u003clabel\u003e\n            \u003cinput type=\"checkbox\" /\u003e {HTMLReactParser(item)}\n          \u003c/label\u003e\n        \u003c/p\u003e\n      ))}\n    \u003c/\u003e\n  )\n}\n\nexport default () =\u003e \u003cBlocks data={dataFromEditor} renderers={{\n  checklist: Checklist\n}} /\u003e\n```\n\n## Security optimization\n\nFor `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.\n\n\n## Inspiration\n\n- [EditorJS-React-Renderer](https://github.com/BomdiZane/EditorJS-React-Renderer) but without opinated inline styles.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmoveyourdigital%2Feditorjs-blocks-react-renderer","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmoveyourdigital%2Feditorjs-blocks-react-renderer","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmoveyourdigital%2Feditorjs-blocks-react-renderer/lists"}