@storybook/react

Variables

• addDecorator
• addParameters
• configure
• forceReRender
• getStorybook
• raw
• setAddon
• storiesOf

Functions

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

Type Aliases

• ComponentMeta
• ComponentStory
• ComponentStoryFn
• ComponentStoryObj
• DecoratorFn
• Meta
• ReactFramework
• Story
• StoryFn
• StoryObj

variable addDecorator

const addDecorator: any;

variable addParameters

const addParameters: any;

variable configure

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

variable forceReRender

const forceReRender: () => void;

variable getStorybook

const getStorybook: () => IStorybookSection[];

variable raw

const raw: () => any;

variable setAddon

const setAddon: (addon: any) => void;

variable storiesOf

const storiesOf: any;

function composeStories

composeStories: <TModule extends CSFExports<ReactFramework>>(
    csfExports: TModule,
    projectAnnotations?: ProjectAnnotations<ReactFramework>
) => Pick<
    StoriesWithPartialProps<ReactFramework, TModule>,
    Exclude<keyof TModule, 'default' | '__esModule' | '__namedExportsOrder'>
>;

• 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 = Args>(
    story: ComposedStory<ReactFramework, TArgs>,
    componentAnnotations: ComponentAnnotations<ReactFramework, TArgs>,
    projectAnnotations?: ProjectAnnotations<ReactFramework>,
    exportsName?: string
) => {
    (extraArgs: Partial<TArgs>): ReactElement<unknown>;
    storyName: string;
    args: Args;
    play: any;
    parameters: any;
};

• 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<ReactFramework>
        | ProjectAnnotations<ReactFramework>[]
) => void;

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

  Deprecated

  Use setProjectAnnotations instead

function setProjectAnnotations

setProjectAnnotations: (
    projectAnnotations:
        | ProjectAnnotations<ReactFramework>
        | ProjectAnnotations<ReactFramework>[]
) => 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 keyof JSX.IntrinsicElements | JSXElementConstructor<any>
> = Meta<ComponentProps<T>>;

• 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 keyof JSX.IntrinsicElements | JSXElementConstructor<any>
> = Story<ComponentProps<T>>;

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

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

  NOTE: this is an alias for ComponentStoryFn. In Storybook v7, ComponentStory will alias ComponentStoryObj

type ComponentStoryFn

type ComponentStoryFn<
    T extends keyof JSX.IntrinsicElements | JSXElementConstructor<any>
> = StoryFn<ComponentProps<T>>;

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

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

type ComponentStoryObj

type ComponentStoryObj<
    T extends keyof JSX.IntrinsicElements | JSXElementConstructor<any>
> = StoryObj<ComponentProps<T>>;

• 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 DecoratorFn

type DecoratorFn = Parameters<typeof addDecorator>[0];

type Meta

type Meta<TArgs = Args> = ComponentAnnotations<ReactFramework, TArgs>;

• Metadata to configure the stories for a component.

  See Also

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

type ReactFramework

type ReactFramework = {
    component: ComponentType<any>;
    storyResult: StoryFnReactReturnType;
};

type Story

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

• 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)

    NOTE that in Storybook 7.0, this type will be renamed to StoryFn and replaced by the current StoryObj type.

type StoryFn

type StoryFn<TArgs = Args> = AnnotatedStoryFn<ReactFramework, TArgs>;

• 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<TArgs = Args> = StoryAnnotations<ReactFramework, TArgs>;

• 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)