Skip to main content

Story


[<span data-tooltip-id="preview__K5QdoMSw2vJJTdmgn">`export default`</span>](export-default) [<span data-tooltip-id="preview__gfoaDXrJa2a2qzjzp">Object</span>](object) to [<span data-tooltip-id="preview__WvmdtwyRb3ESuKpyp">Declaratively </span>](declarative) render [<span data-tooltip-id="preview__9Le7zdA2R4LzoE852">FC</span>](fc)** snapshot** with specific key [<span data-tooltip-id="preview__qXaxHswpoTZw8AXzH">state</span>](state) to dev/test/doc

```tsx
export default {
  title "Button",
  component: Button
}

export const ButtonRed = () => <Button label="Press me" backgroundColor="red" /\>

Source: [storybook.js.org/docs/react/get](https://storybook.js.org/docs/react/get-started/whats-a-story)



 *aka* storiesjs, storiests, Stories

[<span data-tooltip-id="preview__PTEds7YnadyFc4WaF">`title`</span>](title_story) & [<span data-tooltip-id="preview__CEM5Ra7YDwkYiAMgg">`component`</span>](component_story) req fields - others optional

## [`Story Parameter`](story-parameter)

static named metadata for [<span data-tooltip-id="preview__A23cmg9qfyPfXoaaX">Story</span>](story) to control beavior of [<span data-tooltip-id="preview__eqECafoemTENNCBML">Storybook Addons</span>](storybook-addon)/core features

## [`title`](title_story)

name of component to display in [<span data-tooltip-id="preview__jda3hFwcRZFhSDFqL">Storybook Concurrent Explorer</span>](storybook-concurrent-explorer) - can be anything

## [`component`](component_story)

name of [<span data-tooltip-id="preview__9Le7zdA2R4LzoE852">FC</span>](fc) import name - must matc or nothing shows in [<span data-tooltip-id="preview__jda3hFwcRZFhSDFqL">Storybook Concurrent Explorer</span>](storybook-concurrent-explorer)!

## [`decorators`](decorators)

to add [<span data-tooltip-id="preview__KPSho2oHAx2Lhb9mX">Wrapper</span>](wrapper) for [<span data-tooltip-id="preview__A23cmg9qfyPfXoaaX">Stories</span>](story), for inline CSS || [<span data-tooltip-id="preview__PbAMu6uCH9BhJDziX">`Context`</span>](context) [<span data-tooltip-id="preview__7Dr9ZuMP5EZPgySrW">`Provider`</span>](provider)

## `excludeStories`

to set mocked state data as non-story export, via `string[]` || [<span data-tooltip-id="preview__3h346Yny9LWHPJuL2">`RegExp`</span>](regexp)

```jsx
const Template = args => <Task {...args} /\>

export const Default = Template.bind({})
Default.args = {
  // set default args
}

export const _state1 = Template.bind({})
_state1.args = {
  ...Default.args._SOMEPROP
  // set extra state
}

to capture render state of UI component

multiple stories per component

stories.js

CSF​

(standard) Component Story format based on ES6 Module

References​

  1. decorators ↔ to add Wrapper for Stories, for inline CSS || Context Provider

  2. Error could not find react-redux context value; please ensure the component is wrapped in a <Provider\> ↔ forgot to add redux provider to allow access to store. add via decorators in .stories.js

  3. Story Parameter ↔ static named metadata for Story to control beavior of Storybook Addons/core features

  4. CSF ↔ (standard) Component Story format based on ES6 Module