Announcing @storyblok/react
Storyblok is the first headless CMS that works for developers & marketers alike.
Starting from our brand new聽@storyblok/js, we announced聽@storyblok/svelte聽about 1 week and a few days ago.
Today, we'd like to announce another hot馃敟 SDK -聽@storyblok/react聽馃コ
We reviewed how React & Storyblok projects are handled and took care of the pain points to deliver less complication.
Let us know how's your DX with our new聽@storyblok/react聽SDK!
Special thanks to聽Alex,聽Facundo,聽and聽Josefine聽for their hard & awesome work 馃檹
You'll need TL;DR? You can jump directly to the聽LIVE DEMO聽in Stackblitz right away.
Usage
First things first, install聽@storyblok/react聽by running the command below.
npm install @storyblok/react
// yarn add @storyblok/reactInitialization
The next step, register the plugin on your application and add the access token from your Storyblok space.
i.e. You can do that in聽pages/_app.js聽if you use聽@storyblok/react聽for your Next.js projects, or in聽index.js聽file in React apps.
If you would like to use the Storyblok API Client, you can add聽apiPlugin.
import { storyblokInit, apiPlugin } from "@storyblok/react";
import Page from "./components/Page.jsx";
import Teaser from "./components/Teaser.jsx";
storyblokInit({
accessToken: "YOUR_ACCESS_TOKEN",
// bridge: true,
use: [apiPlugin],
components: {
page: Page,
teaser: Teaser,
},
});Did you realize something?馃槑
You don't have to handle conditionally returning components by yourself anymore!
We took care of all and you just need to add all your components to the components object in the聽storyblokInit聽function, and that's it!
Query Storyblok API and listen for Visual Editor changes
You can use the convenient聽useStoryblok(slug, apiOptions)聽hook to get the story from the聽Storyblok CDN API, and automatically use聽Storyblok Bridge聽to listen for the Visual Editor live changes.
import { useStoryblok, StoryblokComponent } from "@storyblok/react";
export default Home() {
const story = useStoryblok("react", { version: "draft" });
if (!story.content) {
return <div>Loading...</div>;
}
return <StoryblokComponent blok={story.content} />;
}Then the聽<StoryblokComponent blok={blok}聽you saw before will take care of loading them for you 馃槈.
Next.js example:
TL;DR: Play with the聽Next.js https://stackblitz.com/edit/react-next-sdk-demo
import { useStoryblokState, useStoryblokApi, StoryblokComponent } from "@storyblok/react";
export default function Home({ story: initialStory }) {
const story = useStoryblokState(initialStory);
if (!story.content) {
return <div>Loading...</div>;
}
return <StoryblokComponent blok={story.content} />;
}
export async function getStaticProps({ preview = false }) {
const storyblokApi = useStoryblokApi()
let { data } = await storyblokApi.get(`cdn/stories/react`, {
version: "draft"
});
return {
props: {
story: data ? data.story : false,
preview,
},
revalidate: 3600, // revalidate every hour
};
}| Resource | Link |
|---|---|
| @storyblok/react docs | https://www.npmjs.com/package/@storyblok/react |
| Storyblok Learning Hub | https://www.storyblok.com/docs |
| DEV.to announcement blog post | https://dev.to/storyblok/announcing-storyblokreact-pgn |
