@storybook/react

  • Version 6.4.22
  • Published
  • 108 kB
  • 24 dependencies
  • MIT license

Install

npm i @storybook/react
yarn add @storybook/react
pnpm add @storybook/react

Overview

Storybook for React: Develop React Component in isolation with Hot Reloading.

Index

Variables

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 Aliases

                  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)

                      Package Files (4)

                      Dependencies (24)

                      Dev Dependencies (3)

                      Peer Dependencies (3)

                      Badge

                      To add a badge like this onejsDocs.io badgeto your package's README, use the codes available below.

                      You may also use Shields.io to create a custom badge linking to https://www.jsdocs.io/package/@storybook/react.

                      • Markdown
                        [![jsDocs.io](https://img.shields.io/badge/jsDocs.io-reference-blue)](https://www.jsdocs.io/package/@storybook/react)
                      • HTML
                        <a href="https://www.jsdocs.io/package/@storybook/react"><img src="https://img.shields.io/badge/jsDocs.io-reference-blue" alt="jsDocs.io"></a>