Merge pull request #632 from arorachakit/add-bridge-options-to-Storyb…

…lokStory

add bridge options to StoryblokStory

README.md

@@ -272,7 +272,10 @@ export async function fetchData() {
 }
 ```
 
-`StoryblokStory` keeps the state for thet story behind the scenes and uses `StoryblokComponent` to render the route components dynamically, using the list of components loaded during the initialization inside the `storyblokInit` function. You can use the `StoryblokComponent` inside the components to redner the nested components dynamically.
+`StoryblokStory` keeps the state for thet story behind the scenes and uses `StoryblokComponent` to render the route components dynamically, using the list of components loaded during the initialization inside the `storyblokInit` function. You can use the `StoryblokComponent` inside the components to render the nested components dynamically. You can also pass bridge options to `StoryblokStory` using the prop `bridgeOptions`. 
+```js
+    <StoryblokStory story={data.story} bridgeOptions={bridgeOptions} />
+```
 
 > Note: To use this approach (with `getStoryblokApi`), you need to include the `apiPlugin` module when calling `storyblokInit` function. If you don't use `apiPlugin`, you can use your preferred method or function to fetch your data.
 

lib/story.tsx

@@ -3,19 +3,20 @@
 import React, { forwardRef } from "react";
 import { useStoryblokState } from "./common/client";
 import StoryblokComponent from "./common/storyblok-component";
-import { ISbStoryData } from "./types";
+import { ISbStoryData, StoryblokBridgeConfigV2 } from "./types";
 
 interface StoryblokStoryProps {
   story: ISbStoryData;
+  bridgeOptions: StoryblokBridgeConfigV2;
   [key: string]: unknown;
 }
 
 const StoryblokStory = forwardRef<HTMLElement, StoryblokStoryProps>(
-  ({ story, ...restProps }, ref) => {
+  ({ story, bridgeOptions, ...restProps }, ref) => {
     if (typeof story.content === "string") {
       story.content = JSON.parse(story.content);
     }
-    story = useStoryblokState(story);
+    story = useStoryblokState(story, bridgeOptions);
     return <StoryblokComponent ref={ref} blok={story.content} {...restProps} />;
   }
 );