@storybook/react
- Version 6.5.16
- Published
- 339 kB
- 35 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;
Functions
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
orcomposeStory
.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 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 aliasComponentStoryObj
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 currentStoryObj
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 (5)
Dependencies (35)
- @babel/preset-flow
- @babel/preset-react
- @pmmmwh/react-refresh-webpack-plugin
- @storybook/addons
- @storybook/client-logger
- @storybook/core
- @storybook/core-common
- @storybook/csf
- @storybook/docs-tools
- @storybook/node-logger
- @storybook/react-docgen-typescript-plugin
- @storybook/semver
- @storybook/store
- @types/estree
- @types/node
- @types/webpack-env
- acorn
- acorn-jsx
- acorn-walk
- babel-plugin-add-react-displayname
- babel-plugin-react-docgen
- core-js
- escodegen
- fs-extra
- global
- html-tags
- lodash
- prop-types
- react-element-to-jsx-string
- react-refresh
- read-pkg-up
- regenerator-runtime
- ts-dedent
- util-deprecate
- webpack
Dev Dependencies (3)
Peer Dependencies (4)
Badge
To add a badge like this oneto 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[](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>
- Updated .
Package analyzed in 3039 ms. - Missing or incorrect documentation? Open an issue for this package.