Loading...
;\n }\n\n return Loading...
;\n }\n\n return (\n Loading...
;\n }\n\n const components: SbReactRichTextComponentMap = {\n heading: CustomHeading,\n link: CustomLink,\n table: CustomTable,\n bold: ({ children }) => \",\n richText: {\n schema: mySchema,\n resolver: (component, blok) => {\n switch (component) {\n case \"my-custom-component\":\n return `${blok.text}
`;\n default:\n return \"Resolver not defined\";\n }\n },\n },\n});\n```\n\nYou can also set a **custom Schema and component resolver only once** by passing the options as the\nsecond parameter to `renderRichText` function:\n\n```js\nimport { renderRichText } from \"@storyblok/react\";\n\nrenderRichText(blok.richTextField, {\n schema: mySchema,\n resolver: (component, blok) => {\n switch (component) {\n case \"my-custom-component\":\n return `${blok.text}
`;\n default:\n return `Component ${component} not found`;\n }\n },\n});\n```\n\nWe also recommend using the\n[Storyblok Rich Text Renderer for React by Claus](https://github.com/claus/storyblok-rich-text-react-renderer)\nfor rendering your Storyblok rich text content to React elements and Next.js applications.\n\n### Using fallback components\n\nBy default, `@storyblok/react` returns an empty `` if a component is not implemented. Setting\n`enableFallbackComponent` to `true` when calling `storyblokInit` bypasses that behavior, rendering a\nfallback component in the frontend instead. You can use the default fallback component, or create a\ncustom React fallback component in your project and use it by setting\n`customFallbackComponent: [YourFallbackComponent]`.\n\n## Efficiently Loading Storyblok Components in React\n\nWhen using Storyblok with React, the general approach is to load all the Storyblok components when\ninitializing Storyblok, usually in a layout page to ensure all pages have access to all of them:\n\n```javascript\nstoryblokInit({\n accessToken,\n use: [apiPlugin],\n components: {\n // all your React components\n },\n});\n```\n\nStoryblok's React SDK automatically renders these predefined components based on your page content.\nWhile this is convenient, it can lead to larger bundle sizes and slower page speeds, especially for\nlarger sites or when using heavy JavaScript libraries that are only needed on specific pages or a\nspecific component.\n\n### Solutions\n\n1. **Storyblok's `setComponents` Function**: Storyblok SDK provides a function called\n `setComponents` that allows you to load only the components needed for each route instead of\n defining all components during initialization. This approach is useful but might not be practical\n if you use a catch-all route, which is common in many React frameworks.\n\n2. **React's `react.lazy`**: React offers a built-in solution called `react.lazy` for code\n splitting. Instead of directly importing components, you can do the following:\n\n ```javascript\n \"use client\";\n import { apiPlugin, storyblokInit } from \"@storyblok/react/rsc\";\n import { lazy } from \"react\";\n\n const lazyComponents = {\n page: lazy(() => import(\"./components/Page\")),\n // other lazy-loaded components\n };\n\n storyblokInit({\n accessToken,\n use: [apiPlugin],\n components: lazyComponents,\n });\n ```\n\n This approach enables automatic code splitting and loads only the necessary JavaScript for each\n page. However, `react.lazy` has some limitations when used with SSR (Server-Side Rendering).\n\n3. **Using `@loadable/component`**: For cases where SSR is needed, or in general, you can use the\n `@loadable/component` library, which offers similar functionality and better SSR support. This\n library is framework-agnostic and can be used with any React framework.\n [Loadable Components Documentation](https://loadable-components.com/docs/getting-started/)\n\n4. **Next.js Dynamic Import**: Next.js has a built-in `dynamic` package that provides dynamic\n imports for lazy loading.\n [Next.js Dynamic Import Documentation](https://nextjs.org/docs/advanced-features/dynamic-import)\n\nBy using these techniques, you can ensure that only the necessary components and dependencies are\nloaded for each page, improving your site's performance and speed.\n\n## Troubleshooting\n\n### \"Server Actions are not supported with static export\"\n\n**Error:** When using Next.js with `output: 'export'`, you might encounter:\n\n```\nError: Server Actions are not supported with static export\n```\n\n**Solution:** Use `@storyblok/react/ssr` instead of `@storyblok/react/rsc` for static exports:\n\n```diff\n- import { StoryblokStory } from \"@storyblok/react/rsc\";\n+ import { StoryblokServerStory } from \"@storyblok/react/ssr\";\n```\n\n**Explanation:** The RSC export includes server actions for live editing, which are incompatible\nwith static exports. The SSR export provides server-side rendering without server actions.\n\n### Live Editing Not Working\n\n**Issue:** Live editing doesn't work in the Visual Editor.\n\n**Possible Solutions:**\n\n1. **Using SSR export**: Live editing isn't available with `@storyblok/react/ssr`. Use\n `@storyblok/react/rsc` for live editing.\n\n2. **Missing bridge loading**: Ensure you're using `StoryblokStory` (RSC) which automatically loads\n the bridge, or manually add `StoryblokLiveEditing`.\n\n3. **Development mode**: Live editing only works in development mode or when the Visual Editor is\n active.\n\n### Component Not Found\n\n**Error:** Seeing empty divs or \"Component not found\" instead of your content.\n\n**Solution:** Ensure all your Storyblok components are registered during initialization:\n\n```js\nstoryblokInit({\n components: {\n page: Page, // Matches 'page' component in Storyblok\n teaser: Teaser, // Matches 'teaser' component in Storyblok\n // Add all your components here\n },\n});\n```\n\n### TypeScript Import Errors\n\n**Issue:** TypeScript can't find the `/ssr` or `/rsc` exports.\n\n**Solution:** Ensure you're using the latest version of `@storyblok/react` (v5.3.0+) which includes\nthese exports.\n\n## The Storyblok JavaScript SDK Ecosystem\n\n\n\n## Further Resources\n\n- [Quick Start](https://www.storyblok.com/technologies?utm_source=github.com&utm_medium=readme&utm_campaign=storyblok-react)\n- [API Documentation](https://www.storyblok.com/docs/api?utm_source=github.com&utm_medium=readme&utm_campaign=storyblok-react)\n- [Developer Tutorials](https://www.storyblok.com/tutorials?utm_source=github.com&utm_medium=readme&utm_campaign=storyblok-react)\n- [Developer Guides](https://www.storyblok.com/docs/guide/introduction?utm_source=github.com&utm_medium=readme&utm_campaign=storyblok-react)\n- [FAQs](https://www.storyblok.com/faqs?utm_source=github.com&utm_medium=readme&utm_campaign=storyblok-react)\n\n## Support\n\n- Bugs or Feature Requests? [Submit an issue](/../../issues/new).\n- Do you have questions about Storyblok or you need help?\n [Join our Discord Community](https://storyblok.com/join-discord).\n\n## Contributing\n\nPlease see our\n[contributing guidelines](https://github.com/storyblok/.github/blob/master/contributing.md) and our\n[code of conduct](https://www.storyblok.com/trust-center?utm_source=github.com&utm_medium=readme&utm_campaign=storyblok-react#code-of-conduct).\nThis project use [semantic-release](https://semantic-release.gitbook.io/semantic-release/) for\ngenerate new versions by using commit messages and we use the Angular Convention to naming the\ncommits. Check\n[this question](https://semantic-release.gitbook.io/semantic-release/support/faq#how-can-i-change-the-type-of-commits-that-trigger-a-release)\nabout it in semantic-release FAQ.\n\n## License\n\nThis project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.\n","readmeFilename":"README.md"}
![\"Storyblok](\"https://a.storyblok.com/f/88751/1776x360/ccc1c50c67/sb-react.png\")
\n \n ![\"Storyblok](\"https://img.shields.io/npm/v/@storyblok/react/latest.svg?style=flat-square\")
\n ![\"npm\"](\"https://img.shields.io/npm/dt/@storyblok/react.svg?style=flat-square\")
\n ![](\"https://img.shields.io/discord/700316478792138842?label=Join%20Our%20Discord%20Community&style=appveyor&logo=discord&color=8d60ff\")
\n ![\"Follow](\"https://img.shields.io/badge/Follow-%40storyblok-8d60ff?style=appveyor&logo=twitter\"){kind=icon}
\n ![\"Follow](\"https://img.shields.io/badge/Try%20Storyblok-Free-8d60ff?style=appveyor&logo=data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAAABGdBTUEAALGPC/xhBQAAADhlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAAqACAAQAAAABAAAAHqADAAQAAAABAAAAHgAAAADpiRU/AAACRElEQVRIDWNgGGmAEd3D3Js3LPrP8D8WXZwSPiMjw6qvPoHhyGYwIXNAbGpbCjbzP0MYuj0YFqMroBV/wCxmIeSju64eDNzMBJUxvP/9i2Hnq5cM1devMnz984eQsQwETeRhYWHgIcJiXqC6VHlFBjUeXgav40cIWkz1oLYXFmGwFBImaDFBHyObcOzdW4aSq5eRhRiE2dgYlpuYoYSKJi8vw3GgWnyAJIs/AuPu4scPGObd/fqVQZ+PHy7+6udPOBsXgySLDfn5GRYYmaKYJcXBgWLpsx8/GPa8foWiBhuHJIsl2DkYQqWksZkDFgP5PObcKYYff//iVAOTIDlx/QPqRMb/YSYBaWlOToZIaVkGZmAZSQiQ5OPtwHwacuo4iplMQEu6tXUZMhSUGDiYmBjylFQYvv/7x9B04xqKOnQOyT5GN+Df//8M59ASXKyMHLoyDD5JPtbj42OYrm+EYgg70JfuYuIoYmLs7AwMjIzA+uY/zjAnyWJpDk6GOFnCvrn86SOwmsNtKciVFAc1ileBHFDC67lzG10Yg0+SjzF0ownsf/OaofvOLYaDQJoQIGix94ljv1gIZI8Pv38zPvj2lQWYf3HGKbpDCFp85v07NnRN1OBTPY6JdRSGxcCw2k6sZuLVMZ5AV4s1TozPnGGFKbz+/PE7IJsHmC//MDMyhXBw8e6FyRFLv3Z0/IKuFqvFyIqAzd1PwBzJw8jAGPfVx38JshwlbIygxmYY43/GQmpais0ODDHuzevLMARHBcgIAQAbOJHZW0/EyQAAAABJRU5ErkJggg==\"){kind=icon}
\n