@storybook/react

Variables

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

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;

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)