O’Reilly Report: Decoupled Applications and Composable Web Architectures - Download Now

Empower your teams & get a 582% ROI: See Storyblok's CMS in action

Skip to main content

Announcing @storyblok/react

Developers
Arisa Fukuzaki
Try Storyblok

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 AlexFacundo, 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/react
    

Initialization

The next step, register the plugin on your application and add the access token from your Storyblok space.

hint:

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.

index.js
        
      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.

App.js
        
      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:

index.js
        
      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
  };
}
    
ResourceLink
@storyblok/react docshttps://www.npmjs.com/package/@storyblok/react
Storyblok Learning Hubhttps://www.storyblok.com/docs
DEV.to announcement blog posthttps://dev.to/storyblok/announcing-storyblokreact-pgn