New
NextJS, SvelteKit, Remix and the future of StorybookAutomate with Chromatic
Star75,376
Back to integrations
Add your integration
Categories
  • ⭐️ Popular
  • 🧩 Essentials
  • 🛠 Code
  • ⚡️ Data & state
  • ✅ Test
  • 💅 Style
  • 🎨 Design
  • ⚙️ Appearance
  • 🗄 Organize
How to install addons Create an addon
@alexanderjeurissen/use-storybook
Storybook provider / hook add-on for consuming storyContext and storyFn anywhere in the story render tree.
npm install @alexanderjeurissen/use-storybook
Last updated over 1 year ago
1.3k
Downloads per week
Readme View on GitHub

useStorybook - provider & hook

Publish

This addon provides a decorator and hook to consume the storyContext and storyFn of the current active story anywhere in the render tree. It's especially useful when you want to inspect the story content, or use parts of the storyContext in utility functions or event tracking.

Installation

either with NPM or Yarn:

yarn add @alexanderjeurissen/use-storybook

or

npm install --save @alexanderjeurissen/use-storybook

Basic usage

A HOC is provided to make hooking the provider into your stories is as seamless as possible:

Add the HOC as a decorator in ./storybook/preview.js:

import { withStoryContext } from '@alexanderjeurissen/use-storybook';

addDecorator(withStoryContext);

Use the provided hook anywhere in the story render tree:

import { useStorybook } from '@alexanderjeurissen/use-storybook';

export default {
  title: "Components|my-component",
};

export const Default = () => {
  const { storyContext, storyFn } = useStorybook();

  ...
}

Advanced usage

There are cases where more finegrained control is desired. Therefore in addition to the withStoryContext HOC, access to the underlying provider and context is possible:

<StoryProvider

import { StoryProvider } from '@alexanderjeurissen/use-storybook';

addDecorator((storyFn, storyContext) => {
  ...

  return (
    <StoryProvider>
      {storyFn()}
    </StoryProvider>
  );
});

This function signature is exactly what the withStoryContext hoc provides.

StoryContext

import { StoryContext } from '@alexanderjeurissen/use-storybook';

addDecorator((storyFn, storyContext) => {
  ...

  return (
    <StoryContext.Provider value={storyFN, storyContext, ...}>
      {storyFn()}
    </StoryContext.Provider>
  );
});

This provider signature is exactly what the <StoryProvider component provides.

Join the community
5,862 developers and counting
WhyWhy StorybookComponent-driven UI
Open source software
Storybook

Maintained by
Chromatic
Special thanks to Netlify and CircleCI