@storybook/react

Variables

• configure
• forceReRender
• raw
• storiesOf

Functions

• composeStories()
• composeStory()
• setGlobalConfig()
• setProjectAnnotations()

Interfaces

• ReactRenderer

  • component
  • storyResult

Type Aliases

• ComponentMeta
• ComponentStory
• ComponentStoryFn
• ComponentStoryObj
• Decorator
• DecoratorFn
• Loader
• Meta
• Preview
• Story
• StoryContext
• StoryFn
• StoryObj

variable configure

const configure: (loader: Addon_Loadable, module: NodeModule) => void;

variable forceReRender

const forceReRender: () => void;

variable raw

const raw: () => any;

variable storiesOf

const storiesOf: any;

function composeStories

composeStories: <TModule extends Store_CSFExports<ReactRenderer, any>>(
    csfExports: TModule,
    projectAnnotations?: ProjectAnnotations<ReactRenderer>
) => Omit<
    StoriesWithPartialProps<ReactRenderer, TModule>,
    keyof Store_CSFExports<_storybook_types.Renderer, Args>
>;

• Function that will receive a stories import (e.g. import * as stories from './Button.stories') and optionally projectAnnotations (e.g. import * from '../.storybook/preview) and will return an object containing all the stories passed, but now as a composed component that has all args/parameters/decorators/etc combined and applied to it.

  It's very useful for reusing stories in scenarios outside of Storybook like unit testing.

  Example:

  import { render } from '@testing-library/react';
  import { composeStories } from '@storybook/react';
  import * as stories from './Button.stories';
  
  const { Primary, Secondary } = composeStories(stories);
  
  test('renders primary button with Hello World', () => {
    const { getByText } = render(<Primary>Hello world</Primary>);
    expect(getByText(/Hello world/i)).not.toBeNull();
  });

  Parameter csfExports

  e.g. (import * as stories from './Button.stories')

  Parameter projectAnnotations

  e.g. (import * as projectAnnotations from '../.storybook/preview') this can be applied automatically if you use setProjectAnnotations in your setup files.

function composeStory

composeStory: <TArgs extends Args = Args>(
    story: ComposedStory<ReactRenderer, TArgs>,
    componentAnnotations: ComponentAnnotations<
        ReactRenderer,
        ComponentProps<TCmpOrArgs>
    >,
    projectAnnotations?: ProjectAnnotations<ReactRenderer>,
    exportsName?: string
) => _storybook_types.PreparedStoryFn<ReactRenderer, Partial<TArgs>>;

• Function that will receive a story along with meta (e.g. a default export from a .stories file) and optionally projectAnnotations e.g. (import * from '../.storybook/preview) and will return a composed component that has all args/parameters/decorators/etc combined and applied to it.

  It's very useful for reusing a story in scenarios outside of Storybook like unit testing.

  Example:

  import { render } from '@testing-library/react';
  import { composeStory } from '@storybook/react';
  import Meta, { Primary as PrimaryStory } from './Button.stories';
  
  const Primary = composeStory(PrimaryStory, Meta);
  
  test('renders primary button with Hello World', () => {
    const { getByText } = render(<Primary>Hello world</Primary>);
    expect(getByText(/Hello world/i)).not.toBeNull();
  });

  Parameter story

  Parameter componentAnnotations

  e.g. (import Meta from './Button.stories')

  Parameter projectAnnotations

  e.g. (import * as projectAnnotations from '../.storybook/preview') this can be applied automatically if you use setProjectAnnotations in your setup files.

  Parameter exportsName

  in case your story does not contain a name and you want it to have a name.

function setGlobalConfig

setGlobalConfig: (
    projectAnnotations:
        | ProjectAnnotations<ReactRenderer>
        | ProjectAnnotations<ReactRenderer>[]
) => void;

• Preserved for users migrating from @storybook/testing-react.

  Deprecated

  Use setProjectAnnotations instead

function setProjectAnnotations

setProjectAnnotations: (
    projectAnnotations:
        | ProjectAnnotations<ReactRenderer>
        | ProjectAnnotations<ReactRenderer>[]
) => void;

• Function that sets the globalConfig of your storybook. The global config is the preview module of your .storybook folder.

  It should be run a single time, so that your global config (e.g. decorators) is applied to your stories when using composeStories or composeStory.

  Example:

  // setup.js (for jest)
  import { setProjectAnnotations } from '@storybook/react';
  import * as projectAnnotations from './.storybook/preview';
  
  setProjectAnnotations(projectAnnotations);

  Parameter projectAnnotations

  e.g. (import * as projectAnnotations from '../.storybook/preview')

type ComponentMeta

type ComponentMeta<T extends JSXElement> = Meta<ComponentProps<T>>;

• Deprecated

  Use Meta instead, e.g. ComponentMeta<typeof Button> -> Meta<typeof Button>.

  For the common case where a component's stories are simple components that receives args as props:

  export default { ... } as ComponentMeta<typeof Button>;

type ComponentStory

type ComponentStory<T extends JSXElement> = ComponentStoryFn<T>;

• Deprecated

  Use StoryFn instead, e.g. ComponentStory<typeof Button> -> StoryFn<typeof Button>. Use StoryObj if you want to migrate to CSF3, which uses objects instead of functions to represent stories You can read more about the CSF3 format here: https://storybook.js.org/blog/component-story-format-3-0/.

  For the common case where a (CSFv3) story is a simple component that receives args as props:

  const MyStory: ComponentStory<typeof Button> = {
    args: { buttonArg1: 'val' },
  }

type ComponentStoryFn

type ComponentStoryFn<T extends JSXElement> = StoryFn<ComponentProps<T>>;

• Deprecated

  Use StoryFn instead, e.g. ComponentStoryFn<typeof Button> -> StoryFn<typeof Button>. Use StoryObj if you want to migrate to CSF3, which uses objects instead of functions to represent stories. You can read more about the CSF3 format here: https://storybook.js.org/blog/component-story-format-3-0/

  For the common case where a (CSFv2) story is a simple component that receives args as props:

  const Template: ComponentStoryFn<typeof Button> = (args) => <Button {...args} />

type ComponentStoryObj

type ComponentStoryObj<T extends JSXElement> = StoryObj<ComponentProps<T>>;

• Deprecated

  Use StoryObj instead, e.g. ComponentStoryObj<typeof Button> -> StoryObj<typeof Button>.

  For the common case where a (CSFv3) story is a simple component that receives args as props:

  const MyStory: ComponentStoryObj<typeof Button> = {
    args: { buttonArg1: 'val' },
  }

type Decorator

type Decorator<TArgs = StrictArgs> = DecoratorFunction<ReactRenderer, TArgs>;

type DecoratorFn

type DecoratorFn = DecoratorFunction<ReactRenderer>;

• Deprecated

  Use Decorator instead.

type Loader

type Loader<TArgs = StrictArgs> = LoaderFunction<ReactRenderer, TArgs>;

type Meta

type Meta<TCmpOrArgs = Args> = TCmpOrArgs extends ComponentType<any>
    ? ComponentAnnotations<ReactRenderer, ComponentProps<TCmpOrArgs>>
    : ComponentAnnotations<ReactRenderer, TCmpOrArgs>;

• Metadata to configure the stories for a component.

  See Also

  • [Default export](https://storybook.js.org/docs/formats/component-story-format/#default-export)

type Preview

type Preview = ProjectAnnotations<ReactRenderer>;

type Story

type Story<TArgs = Args> = StoryFn<TArgs>;

• See Also

  • [Named Story exports](https://storybook.js.org/docs/formats/component-story-format/#named-story-exports)

  Deprecated

  Use StoryFn instead. Use StoryObj if you want to migrate to CSF3, which uses objects instead of functions to represent stories. You can read more about the CSF3 format here: https://storybook.js.org/blog/component-story-format-3-0/

  Story function that represents a CSFv2 component example.

type StoryContext

type StoryContext<TArgs = StrictArgs> = StoryContext$1<ReactRenderer, TArgs>;

type StoryFn

type StoryFn<TCmpOrArgs = Args> = TCmpOrArgs extends ComponentType<any>
    ? AnnotatedStoryFn<ReactRenderer, ComponentProps<TCmpOrArgs>>
    : AnnotatedStoryFn<ReactRenderer, TCmpOrArgs>;

• Story function that represents a CSFv2 component example.

  See Also

  • [Named Story exports](https://storybook.js.org/docs/formats/component-story-format/#named-story-exports)

type StoryObj

type StoryObj<TMetaOrCmpOrArgs = Args> = TMetaOrCmpOrArgs extends {
    render?: ArgsStoryFn<ReactRenderer, any>;
    component?: infer Component;
    args?: infer DefaultArgs;
}
    ? Simplify<
          (Component extends ComponentType<any>
              ? ComponentProps<Component>
              : unknown) &
              ArgsFromMeta<ReactRenderer, TMetaOrCmpOrArgs>
      > extends infer TArgs
        ? StoryAnnotations<
              ReactRenderer,
              TArgs,
              SetOptional<
                  TArgs,
                  keyof TArgs & keyof (DefaultArgs & ActionArgs<TArgs>)
              >
          >
        : never
    : TMetaOrCmpOrArgs extends ComponentType<any>
    ? StoryAnnotations<ReactRenderer, ComponentProps<TMetaOrCmpOrArgs>>
    : StoryAnnotations<ReactRenderer, TMetaOrCmpOrArgs>;

• Story function that represents a CSFv3 component example.

  See Also

  • [Named Story exports](https://storybook.js.org/docs/formats/component-story-format/#named-story-exports)