{"id":20349206,"url":"https://github.com/strapi/blocks-react-renderer","last_synced_at":"2025-05-15T10:07:11.710Z","repository":{"id":205057871,"uuid":"703952560","full_name":"strapi/blocks-react-renderer","owner":"strapi","description":"A React renderer for the Strapi's Blocks rich text editor","archived":false,"fork":false,"pushed_at":"2025-04-10T15:29:22.000Z","size":1240,"stargazers_count":199,"open_issues_count":28,"forks_count":32,"subscribers_count":14,"default_branch":"main","last_synced_at":"2025-04-21T18:45:50.598Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/strapi.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","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,"zenodo":null}},"created_at":"2023-10-12T08:39:56.000Z","updated_at":"2025-04-21T14:15:09.000Z","dependencies_parsed_at":"2025-02-23T01:02:31.387Z","dependency_job_id":"0c089a68-c883-4385-82e8-ab83c883e695","html_url":"https://github.com/strapi/blocks-react-renderer","commit_stats":null,"previous_names":["strapi/blocks-react-renderer"],"tags_count":7,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/strapi%2Fblocks-react-renderer","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/strapi%2Fblocks-react-renderer/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/strapi%2Fblocks-react-renderer/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/strapi%2Fblocks-react-renderer/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/strapi","download_url":"https://codeload.github.com/strapi/blocks-react-renderer/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254319720,"owners_count":22051073,"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":[],"created_at":"2024-11-14T22:24:37.595Z","updated_at":"2025-05-15T10:07:06.695Z","avatar_url":"https://github.com/strapi.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Strapi Blocks React Renderer\n\nEasily render the content of Strapi's new Blocks rich text editor in your React frontend.\n\n## Installation\n\nInstall the Blocks renderer and its peer dependencies:\n\n```sh\nyarn add @strapi/blocks-react-renderer react react-dom\n```\n\n```sh\nnpm install @strapi/blocks-react-renderer react react-dom\n```\n\n## Basic usage\n\nAfter fetching your Strapi content, you can use the BlocksRenderer component to render the data from a blocks attribute. Pass the array of blocks coming from your Strapi API to the `content` prop:\n\n```jsx\nimport { BlocksRenderer, type BlocksContent } from '@strapi/blocks-react-renderer';\n\n// Content should come from your Strapi API\nconst content: BlocksContent = [\n  {\n    type: 'paragraph',\n    children: [{ type: 'text', text: 'A simple paragraph' }],\n  },\n];\n\nconst App = () =\u003e {\n  return \u003cBlocksRenderer content={content} /\u003e;\n};\n```\n\n## Custom components\n\nYou can provide your own React components to the renderer, both for blocks and modifier. They will be merged with the default components, so you can override only the ones you need.\n\n- **Blocks** are full-width elements, usually at the root of the content. The available options are:\n  - paragraph\n  - heading (receives `level` and `plainText`)\n  - list (receives `format`)\n  - quote\n  - code (receives `plainText`)\n  - image (receives `image`)\n  - link (receives `url`)\n- **Modifiers** are inline elements, used to change the appearance of fragments of text within a block. The available options are:\n  - bold\n  - italic\n  - underline\n  - strikethrough\n  - code\n\nTo provide your own components, pass an object to the `blocks` and `modifiers` props of the renderer. For each type, the value should be a React component that will receive the props of the block or modifier. Make sure to always render the children, so that the nested blocks and modifiers are rendered as well.\n\n```jsx\nimport { BlocksRenderer } from '@strapi/blocks-react-renderer';\n\n// Content should come from your Strapi API\nconst content = [\n  {\n    type: 'paragraph',\n    children: [{ type: 'text', text: 'A simple paragraph' }],\n  },\n];\n\nconst App = () =\u003e {\n  return (\n    \u003cBlocksRenderer\n      content={content}\n      blocks={{\n        // You can use the default components to set class names...\n        paragraph: ({ children }) =\u003e \u003cp className=\"text-neutral900 max-w-prose\"\u003e{children}\u003c/p\u003e,\n        // ...or point to a design system\n        heading: ({ children, level }) =\u003e {\n          switch (level) {\n            case 1:\n              return \u003cTypography variant=\"h1\"\u003e{children}\u003c/Typography\u003e\n            case 2:\n              return \u003cTypography variant=\"h2\"\u003e{children}\u003c/Typography\u003e\n            case 3:\n              return \u003cTypography variant=\"h3\"\u003e{children}\u003c/Typography\u003e\n            case 4:\n              return \u003cTypography variant=\"h4\"\u003e{children}\u003c/Typography\u003e\n            case 5:\n              return \u003cTypography variant=\"h5\"\u003e{children}\u003c/Typography\u003e\n            case 6:\n              return \u003cTypography variant=\"h6\"\u003e{children}\u003c/Typography\u003e\n            default:\n              return \u003cTypography variant=\"h1\"\u003e{children}\u003c/Typography\u003e\n          }\n        },\n        // For links, you may want to use the component from your router or framework\n        link: ({ children, url }) =\u003e \u003cLink to={url}\u003e{children}\u003c/Link\u003e,\n      }}\n      modifiers={{\n        bold: ({ children }) =\u003e \u003cstrong\u003e{children}\u003c/strong\u003e,\n        italic: ({ children }) =\u003e \u003cspan className=\"italic\"\u003e{children}\u003c/span\u003e,\n      }}\n    /\u003e\n  );\n};\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fstrapi%2Fblocks-react-renderer","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fstrapi%2Fblocks-react-renderer","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fstrapi%2Fblocks-react-renderer/lists"}