@storyblok/react 2.3.4 → 2.4.0

package/README.md

@@ -63,16 +63,20 @@ import { storyblokInit, apiPlugin } from "@storyblok/react";
 /** Import your components */
 import Page from "./components/Page";
 import Teaser from "./components/Teaser";
+// import FallbackComponent from "./components/FallbackComponent";
 
 storyblokInit({
   accessToken: "YOUR_ACCESS_TOKEN",
   use: [apiPlugin],
-  // bridge: false,
-  // apiOptions: {},
   components: {
     page: Page,
     teaser: Teaser,
   },
+  // bridge: false,
+  // apiOptions: {},
+  // richText: {},
+  // enableFallbackComponent: false,
+  // customFallbackComponent: FallbackComponent,
 });
 ```
 
@@ -591,6 +595,10 @@ renderRichText(blok.richTextField, {
 
 We also recommend using the [Storyblok Rich Text Renderer for React by Claus](https://github.com/claus/storyblok-rich-text-react-renderer) for rendering your Storyblok rich text content to React elements and Next.js applications.
 
+### Using fallback components
+
+By default, `@storyblok/react` returns an empty `<div>` if a component is not implemented. Setting `enableFallbackComponent` to `true` when calling `storyblokInit` bypasses that behavior, rendering a fallback component in the frontend instead. You can use the default fallback component, or create a custom React fallback component in your project and use it by setting `customFallbackComponent: [YourFallbackComponent]`.
+
 ## The Storyblok JavaScript SDK Ecosystem
 
 ![A visual representation of the Storyblok JavaScript SDK Ecosystem](https://a.storyblok.com/f/88751/2400x1350/be4a4a4180/sdk-ecosystem.png/m/1200x0)

package/dist/index.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const y=require("react"),e=require("./storyblok-js.js"),o=require("./index2.js"),b=require("./client.js"),a=require("./storyblok-component.js"),d=(i,r={},t={})=>{const l=o.useStoryblokApi();if(!l)return console.error("You can't use useStoryblok if you're not loading apiPlugin."),null;let[u,n]=y.useState({});t.resolveRelations=t.resolveRelations??r.resolve_relations,t.resolveLinks=t.resolveLinks??r.resolve_links;const k=typeof window<"u"&&typeof window.storyblokRegisterEvent<"u";return y.useEffect(()=>{async function c(){const{data:s}=await l.get(`cdn/stories/${i}`,r);n(s.story),k&&s.story.id&&e.registerStoryblokBridge(s.story.id,S=>n(S),t)}c()},[i,JSON.stringify(r)]),u};exports.RichTextResolver=e.RichTextResolver;exports.RichTextSchema=e.RichTextSchema;exports.apiPlugin=e.apiPlugin;exports.loadStoryblokBridge=e.loadStoryblokBridge;exports.registerStoryblokBridge=e.registerStoryblokBridge;exports.renderRichText=e.renderRichText;exports.storyblokEditable=e.storyblokEditable;exports.useStoryblokBridge=e.registerStoryblokBridge;exports.getComponent=o.getComponent;exports.getStoryblokApi=o.useStoryblokApi;exports.setComponents=o.setComponents;exports.storyblokInit=o.storyblokInit;exports.useStoryblokApi=o.useStoryblokApi;exports.useStoryblokState=b.useStoryblokState;exports.StoryblokComponent=a;exports.useStoryblok=d;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const y=require("react"),e=require("./storyblok-js.js"),o=require("./index2.js"),c=require("./client.js"),S=require("./storyblok-component.js"),d=(n,r={},t={})=>{const s=o.useStoryblokApi();if(!s)return console.error("You can't use useStoryblok if you're not loading apiPlugin."),null;let[a,i]=y.useState({});t.resolveRelations=t.resolveRelations??r.resolve_relations,t.resolveLinks=t.resolveLinks??r.resolve_links;const b=typeof window<"u"&&typeof window.storyblokRegisterEvent<"u";return y.useEffect(()=>{async function k(){const{data:l}=await s.get(`cdn/stories/${n}`,r);i(l.story),b&&l.story.id&&e.registerStoryblokBridge(l.story.id,u=>i(u),t)}k()},[n,JSON.stringify(r)]),a};exports.RichTextResolver=e.RichTextResolver;exports.RichTextSchema=e.RichTextSchema;exports.apiPlugin=e.apiPlugin;exports.loadStoryblokBridge=e.loadStoryblokBridge;exports.registerStoryblokBridge=e.registerStoryblokBridge;exports.renderRichText=e.renderRichText;exports.storyblokEditable=e.storyblokEditable;exports.useStoryblokBridge=e.registerStoryblokBridge;exports.getComponent=o.getComponent;exports.getCustomFallbackComponent=o.getCustomFallbackComponent;exports.getEnableFallbackComponent=o.getEnableFallbackComponent;exports.getStoryblokApi=o.useStoryblokApi;exports.setComponents=o.setComponents;exports.storyblokInit=o.storyblokInit;exports.useStoryblokApi=o.useStoryblokApi;exports.useStoryblokState=c.useStoryblokState;exports.StoryblokComponent=S;exports.useStoryblok=d;

package/dist/index.mjs

@@ -1,12 +1,12 @@
-import { useState as f, useEffect as u } from "react";
-import { registerStoryblokBridge as k } from "./storyblok-js.mjs";
-import { RichTextResolver as v, RichTextSchema as x, apiPlugin as R, loadStoryblokBridge as w, renderRichText as B, storyblokEditable as h } from "./storyblok-js.mjs";
-import { useStoryblokApi as d } from "./index2.mjs";
-import { getComponent as A, setComponents as C, storyblokInit as T } from "./index2.mjs";
-import { useStoryblokState as L } from "./client.mjs";
-import { default as _ } from "./storyblok-component.mjs";
+import { useState as f, useEffect as k } from "react";
+import { registerStoryblokBridge as u } from "./storyblok-js.mjs";
+import { RichTextResolver as v, RichTextSchema as x, apiPlugin as R, loadStoryblokBridge as C, renderRichText as w, storyblokEditable as B } from "./storyblok-js.mjs";
+import { useStoryblokApi as c } from "./index2.mjs";
+import { getComponent as h, getCustomFallbackComponent as A, getEnableFallbackComponent as T, setComponents as F, storyblokInit as I } from "./index2.mjs";
+import { useStoryblokState as P } from "./client.mjs";
+import { default as J } from "./storyblok-component.mjs";
 const b = (r, e = {}, o = {}) => {
-  const s = d();
+  const s = c();
   if (!s)
     return console.error(
       "You can't use useStoryblok if you're not loading apiPlugin."
@@ -14,36 +14,38 @@ const b = (r, e = {}, o = {}) => {
   let [l, n] = f({});
   o.resolveRelations = o.resolveRelations ?? e.resolve_relations, o.resolveLinks = o.resolveLinks ?? e.resolve_links;
   const i = typeof window < "u" && typeof window.storyblokRegisterEvent < "u";
-  return u(() => {
-    async function y() {
+  return k(() => {
+    async function a() {
       const { data: t } = await s.get(
         `cdn/stories/${r}`,
         e
       );
-      n(t.story), i && t.story.id && k(
+      n(t.story), i && t.story.id && u(
         t.story.id,
-        (a) => n(a),
+        (y) => n(y),
         o
       );
     }
-    y();
+    a();
   }, [r, JSON.stringify(e)]), l;
 };
 export {
   v as RichTextResolver,
   x as RichTextSchema,
-  _ as StoryblokComponent,
+  J as StoryblokComponent,
   R as apiPlugin,
-  A as getComponent,
-  d as getStoryblokApi,
-  w as loadStoryblokBridge,
-  k as registerStoryblokBridge,
-  B as renderRichText,
-  C as setComponents,
-  h as storyblokEditable,
-  T as storyblokInit,
+  h as getComponent,
+  A as getCustomFallbackComponent,
+  T as getEnableFallbackComponent,
+  c as getStoryblokApi,
+  C as loadStoryblokBridge,
+  u as registerStoryblokBridge,
+  w as renderRichText,
+  F as setComponents,
+  B as storyblokEditable,
+  I as storyblokInit,
   b as useStoryblok,
-  d as useStoryblokApi,
-  k as useStoryblokBridge,
-  L as useStoryblokState
+  c as useStoryblokApi,
+  u as useStoryblokBridge,
+  P as useStoryblokState
 };

package/dist/index2.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("./storyblok-js.js"),l=require("./storyblok-component.js");let r=null,t={};const n=()=>(r||console.error("You can't use getStoryblokApi if you're not loading apiPlugin."),r),s=e=>(t=e,t),b=e=>t[e]?t[e]:(console.error(`Component ${e} doesn't exist.`),!1),c=(e={})=>{const{storyblokApi:i}=o.storyblokInit(e);r=i,t=e.components};exports.RichTextResolver=o.RichTextResolver;exports.RichTextSchema=o.RichTextSchema;exports.apiPlugin=o.apiPlugin;exports.loadStoryblokBridge=o.loadStoryblokBridge;exports.registerStoryblokBridge=o.registerStoryblokBridge;exports.renderRichText=o.renderRichText;exports.storyblokEditable=o.storyblokEditable;exports.useStoryblokBridge=o.registerStoryblokBridge;exports.StoryblokComponent=l;exports.getComponent=b;exports.getStoryblokApi=n;exports.setComponents=s;exports.storyblokInit=c;exports.useStoryblokApi=n;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./storyblok-js.js"),b=require("./storyblok-component.js");let l=null,t={},n=!1,r=null;const s=()=>(l||console.error("You can't use getStoryblokApi if you're not loading apiPlugin."),l),i=o=>(t=o,t),c=o=>t[o]?t[o]:(console.error(`Component ${o} doesn't exist.`),!1),k=()=>n,m=()=>r,u=(o={})=>{const{storyblokApi:a}=e.storyblokInit(o);l=a,t=o.components,n=o.enableFallbackComponent,r=o.customFallbackComponent};exports.RichTextResolver=e.RichTextResolver;exports.RichTextSchema=e.RichTextSchema;exports.apiPlugin=e.apiPlugin;exports.loadStoryblokBridge=e.loadStoryblokBridge;exports.registerStoryblokBridge=e.registerStoryblokBridge;exports.renderRichText=e.renderRichText;exports.storyblokEditable=e.storyblokEditable;exports.useStoryblokBridge=e.registerStoryblokBridge;exports.StoryblokComponent=b;exports.getComponent=c;exports.getCustomFallbackComponent=m;exports.getEnableFallbackComponent=k;exports.getStoryblokApi=s;exports.setComponents=i;exports.storyblokInit=u;exports.useStoryblokApi=s;

package/dist/index2.mjs

@@ -1,26 +1,28 @@
-import { storyblokInit as n } from "./storyblok-js.mjs";
-import { RichTextResolver as k, RichTextSchema as u, apiPlugin as y, loadStoryblokBridge as g, registerStoryblokBridge as d, renderRichText as m, storyblokEditable as S, registerStoryblokBridge as f } from "./storyblok-js.mjs";
-import { default as A } from "./storyblok-component.mjs";
-let e = null, t = {};
-const l = () => (e || console.error(
+import { storyblokInit as s } from "./storyblok-js.mjs";
+import { RichTextResolver as g, RichTextSchema as C, apiPlugin as d, loadStoryblokBridge as f, registerStoryblokBridge as S, renderRichText as x, storyblokEditable as F, registerStoryblokBridge as A } from "./storyblok-js.mjs";
+import { default as B } from "./storyblok-component.mjs";
+let t = null, e = {}, r = !1, l = null;
+const b = () => (t || console.error(
   "You can't use getStoryblokApi if you're not loading apiPlugin."
-), e), i = (o) => (t = o, t), a = (o) => t[o] ? t[o] : (console.error(`Component ${o} doesn't exist.`), !1), b = (o = {}) => {
-  const { storyblokApi: r } = n(o);
-  e = r, t = o.components;
+), t), c = (o) => (e = o, e), i = (o) => e[o] ? e[o] : (console.error(`Component ${o} doesn't exist.`), !1), k = () => r, m = () => l, p = (o = {}) => {
+  const { storyblokApi: n } = s(o);
+  t = n, e = o.components, r = o.enableFallbackComponent, l = o.customFallbackComponent;
 };
 export {
-  k as RichTextResolver,
-  u as RichTextSchema,
-  A as StoryblokComponent,
-  y as apiPlugin,
-  a as getComponent,
-  l as getStoryblokApi,
-  g as loadStoryblokBridge,
-  d as registerStoryblokBridge,
-  m as renderRichText,
-  i as setComponents,
-  S as storyblokEditable,
-  b as storyblokInit,
-  l as useStoryblokApi,
-  f as useStoryblokBridge
+  g as RichTextResolver,
+  C as RichTextSchema,
+  B as StoryblokComponent,
+  d as apiPlugin,
+  i as getComponent,
+  m as getCustomFallbackComponent,
+  k as getEnableFallbackComponent,
+  b as getStoryblokApi,
+  f as loadStoryblokBridge,
+  S as registerStoryblokBridge,
+  x as renderRichText,
+  c as setComponents,
+  F as storyblokEditable,
+  p as storyblokInit,
+  b as useStoryblokApi,
+  A as useStoryblokBridge
 };

package/dist/rsc.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("./index2.js"),r=require("./story.js"),t=require("./bridge-loader.js"),i=require("./storyblok-component.js"),e=require("./storyblok-js.js");exports.getComponent=o.getComponent;exports.getStoryblokApi=o.useStoryblokApi;exports.setComponents=o.setComponents;exports.storyblokInit=o.storyblokInit;exports.useStoryblokApi=o.useStoryblokApi;exports.StoryblokStory=r;exports.BridgeLoader=t;exports.StoryblokComponent=i;exports.RichTextResolver=e.RichTextResolver;exports.RichTextSchema=e.RichTextSchema;exports.apiPlugin=e.apiPlugin;exports.loadStoryblokBridge=e.loadStoryblokBridge;exports.registerStoryblokBridge=e.registerStoryblokBridge;exports.renderRichText=e.renderRichText;exports.storyblokEditable=e.storyblokEditable;exports.useStoryblokBridge=e.registerStoryblokBridge;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("./index2.js"),t=require("./story.js"),r=require("./bridge-loader.js"),l=require("./storyblok-component.js"),e=require("./storyblok-js.js");exports.getComponent=o.getComponent;exports.getCustomFallbackComponent=o.getCustomFallbackComponent;exports.getEnableFallbackComponent=o.getEnableFallbackComponent;exports.getStoryblokApi=o.useStoryblokApi;exports.setComponents=o.setComponents;exports.storyblokInit=o.storyblokInit;exports.useStoryblokApi=o.useStoryblokApi;exports.StoryblokStory=t;exports.BridgeLoader=r;exports.StoryblokComponent=l;exports.RichTextResolver=e.RichTextResolver;exports.RichTextSchema=e.RichTextSchema;exports.apiPlugin=e.apiPlugin;exports.loadStoryblokBridge=e.loadStoryblokBridge;exports.registerStoryblokBridge=e.registerStoryblokBridge;exports.renderRichText=e.renderRichText;exports.storyblokEditable=e.storyblokEditable;exports.useStoryblokBridge=e.registerStoryblokBridge;

package/dist/rsc.mjs

@@ -1,23 +1,25 @@
-import { getComponent as r, useStoryblokApi as t, setComponents as l, storyblokInit as i, useStoryblokApi as s } from "./index2.mjs";
-import { default as b } from "./story.mjs";
-import { default as p } from "./bridge-loader.mjs";
-import { default as k } from "./storyblok-component.mjs";
-import { RichTextResolver as g, RichTextSchema as m, apiPlugin as n, loadStoryblokBridge as f, registerStoryblokBridge as x, renderRichText as u, storyblokEditable as B, registerStoryblokBridge as c } from "./storyblok-js.mjs";
+import { getComponent as t, getCustomFallbackComponent as r, getEnableFallbackComponent as l, useStoryblokApi as a, setComponents as i, storyblokInit as s, useStoryblokApi as b } from "./index2.mjs";
+import { default as p } from "./story.mjs";
+import { default as d } from "./bridge-loader.mjs";
+import { default as m } from "./storyblok-component.mjs";
+import { RichTextResolver as S, RichTextSchema as f, apiPlugin as u, loadStoryblokBridge as x, registerStoryblokBridge as c, renderRichText as C, storyblokEditable as B, registerStoryblokBridge as h } from "./storyblok-js.mjs";
 export {
-  p as BridgeLoader,
-  g as RichTextResolver,
-  m as RichTextSchema,
-  k as StoryblokComponent,
-  b as StoryblokStory,
-  n as apiPlugin,
-  r as getComponent,
-  t as getStoryblokApi,
-  f as loadStoryblokBridge,
-  x as registerStoryblokBridge,
-  u as renderRichText,
-  l as setComponents,
+  d as BridgeLoader,
+  S as RichTextResolver,
+  f as RichTextSchema,
+  m as StoryblokComponent,
+  p as StoryblokStory,
+  u as apiPlugin,
+  t as getComponent,
+  r as getCustomFallbackComponent,
+  l as getEnableFallbackComponent,
+  a as getStoryblokApi,
+  x as loadStoryblokBridge,
+  c as registerStoryblokBridge,
+  C as renderRichText,
+  i as setComponents,
   B as storyblokEditable,
-  i as storyblokInit,
-  s as useStoryblokApi,
-  c as useStoryblokBridge
+  s as storyblokInit,
+  b as useStoryblokApi,
+  h as useStoryblokBridge
 };

package/dist/storyblok-component.js

@@ -1 +1 @@
-"use strict";const e=require("react"),p=require("./index2.js"),r=e.forwardRef(({blok:o,...n},l)=>{if(!o)return console.error("Please provide a 'blok' property to the StoryblokComponent"),e.createElement("div",null,"Please provide a blok property to the StoryblokComponent");const t=p.getComponent(o.component);return t?e.createElement(t,{ref:l,blok:o,...n}):e.createElement("div",null)});r.displayName="StoryblokComponent";module.exports=r;
+"use strict";const e=require("react"),o=require("./index2.js"),c=e.forwardRef(({blok:t,...n},a)=>{if(!t)return console.error("Please provide a 'blok' property to the StoryblokComponent"),e.createElement("div",null,"Please provide a blok property to the StoryblokComponent");const r=o.getComponent(t.component);if(r)return e.createElement(r,{ref:a,blok:t,...n});if(o.getEnableFallbackComponent()){const l=o.getCustomFallbackComponent();return l?e.createElement(l,{blok:t,...n}):e.createElement(e.Fragment,null,e.createElement("p",null,"Component could not be found for blok"," ",e.createElement("strong",null,t.component),"! Is it configured correctly?"))}return e.createElement("div",null)});c.displayName="StoryblokComponent";module.exports=c;

package/dist/storyblok-component.mjs

@@ -1,16 +1,22 @@
-import o, { forwardRef as p } from "react";
-import { getComponent as l } from "./index2.mjs";
-const m = p(
-  ({ blok: e, ...r }, n) => {
-    if (!e)
+import e, { forwardRef as m } from "react";
+import { getComponent as a, getEnableFallbackComponent as p, getCustomFallbackComponent as c } from "./index2.mjs";
+const u = m(
+  ({ blok: t, ...o }, l) => {
+    if (!t)
       return console.error(
         "Please provide a 'blok' property to the StoryblokComponent"
-      ), /* @__PURE__ */ o.createElement("div", null, "Please provide a blok property to the StoryblokComponent");
-    const t = l(e.component);
-    return t ? /* @__PURE__ */ o.createElement(t, { ref: n, blok: e, ...r }) : /* @__PURE__ */ o.createElement("div", null);
+      ), /* @__PURE__ */ e.createElement("div", null, "Please provide a blok property to the StoryblokComponent");
+    const n = a(t.component);
+    if (n)
+      return /* @__PURE__ */ e.createElement(n, { ref: l, blok: t, ...o });
+    if (p()) {
+      const r = c();
+      return r ? /* @__PURE__ */ e.createElement(r, { blok: t, ...o }) : /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement("p", null, "Component could not be found for blok", " ", /* @__PURE__ */ e.createElement("strong", null, t.component), "! Is it configured correctly?"));
+    }
+    return /* @__PURE__ */ e.createElement("div", null);
   }
 );
-m.displayName = "StoryblokComponent";
+u.displayName = "StoryblokComponent";
 export {
-  m as default
+  u as default
 };

package/dist/types/common/index.d.ts

@@ -3,6 +3,8 @@ import { SbReactComponentsMap, SbReactSDKOptions, StoryblokClient } from "../typ
 export declare const useStoryblokApi: () => StoryblokClient;
 export declare const setComponents: (newComponentsMap: SbReactComponentsMap) => SbReactComponentsMap;
 export declare const getComponent: (componentKey: string) => false | import("react").ElementType<any>;
+export declare const getEnableFallbackComponent: () => boolean;
+export declare const getCustomFallbackComponent: () => import("react").ElementType<any>;
 export declare const storyblokInit: (pluginOptions?: SbReactSDKOptions) => void;
 export { default as StoryblokComponent } from "./storyblok-component";
 export { useStoryblokApi as getStoryblokApi };

package/dist/types/types.d.ts

@@ -6,6 +6,8 @@ export interface SbReactComponentsMap {
 }
 export interface SbReactSDKOptions extends SbSDKOptions {
     components?: SbReactComponentsMap;
+    enableFallbackComponent?: boolean;
+    customFallbackComponent?: React.ElementType;
 }
 export type TUseStoryblokState = <T = void>(initialStory: ISbStoryData<T> | null, bridgeOptions?: StoryblokBridgeConfigV2) => ISbStoryData<T> | null;
 export type { ISbConfig, ISbCache, ISbResult, ISbResponse, ISbError, ISbNode, ISbSchema, ThrottleFn, AsyncFn, ArrayFn, ISbContentMangmntAPI, ISbManagmentApiResult, ISbStories, ISbStory, ISbDimensions, ISbStoryData, ISbAlternateObject, ISbStoriesParams, ISbStoryParams, ISbRichtext, SbBlokData, SbBlokKeyDataTypes, SbRichTextOptions, SbSDKOptions, StoryblokBridgeConfigV2, StoryblokBridgeV2, StoryblokClient, StoryblokComponentType, useStoryblokBridge, } from "@storyblok/js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storyblok/react",
-  "version": "2.3.4",
+  "version": "2.4.0",
   "description": "SDK to integrate Storyblok into your project using React.",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",