@storybook/react
- Version 7.0.18
- Published
- 476 kB
- 21 dependencies
- MIT license
Install
npm i @storybook/react
yarn add @storybook/react
pnpm add @storybook/react
Overview
Storybook React renderer
Index
Variables
Functions
Interfaces
Type Aliases
Variables
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;
Functions
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
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')
Interfaces
interface ReactRenderer
interface ReactRenderer extends WebRenderer {}
property component
component: ComponentType<this['T']>;
property storyResult
storyResult: StoryFnReactReturnType;
Type Aliases
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>. UseStoryObj
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>. UseStoryObj
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. UseStoryObj
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)
Package Files (2)
Dependencies (21)
- @storybook/client-logger
- @storybook/core-client
- @storybook/docs-tools
- @storybook/global
- @storybook/preview-api
- @storybook/react-dom-shim
- @storybook/types
- @types/escodegen
- @types/estree
- @types/node
- acorn
- acorn-jsx
- acorn-walk
- escodegen
- html-tags
- lodash
- prop-types
- react-element-to-jsx-string
- ts-dedent
- type-fest
- util-deprecate
Dev Dependencies (6)
Peer Dependencies (2)
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 3924 ms. - Missing or incorrect documentation? Open an issue for this package.