@storybook/preview-api

Fetching and rendering stories

This feature allows developers to fetch story data by ID and render it using a custom component or utility.

import { useStorybookApi } from '@storybook/api';

function MyComponent() {
  const api = useStorybookApi();
  const story = api.getData('some-story-id');

  return <StoryRenderer story={story} />;
}

Listening to Storybook events

This feature enables components to listen to Storybook-specific events and react accordingly, as well as emit events to the Storybook environment.

import { useEffect } from 'react';
import { useChannel } from '@storybook/api';

function MyComponent() {
  const emit = useChannel({
    'storybook/my-event': (eventData) => {
      console.log('Event data:', eventData);
    }
  });

  useEffect(() => {
    emit('storybook/my-event', { payload: 'data' });
  }, [emit]);

  return <div>Check the console for event data.</div>;
}

Manipulating the Storybook UI

Developers can use this feature to programmatically control the Storybook UI, such as changing the current story displayed.

import { addons } from '@storybook/addons';

addons.setChannel(new Channel({ transport: new PostmsgTransport({ key: 'iframe-key' }) }));

addons.getChannel().emit('setCurrentStory', { storyId: 'some-story-id' });