Nuanced Pumpkin Mavens

    @alexanderjeurissen/use-storybook
    TypeScript icon, indicating that this package has built-in type declarations

    2.0.5 • Public • Published

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

    Install

    npm i @alexanderjeurissen/use-storybook

    DownloadsWeekly Downloads

    1,345

    Version

    2.0.5

    License

    MIT

    Unpacked Size

    6.12 kB

    Total Files

    5

    Last publish

    Collaborators

    • alexanderjeurissen