Manage component state in storybook stories.

Usage no npm install needed!

<script type="module">
  import ahanapediatricsStorybookState from 'https://cdn.skypack.dev/@ahanapediatrics/storybook-state';


Storybook State

An extension for Storybook that manages the state of a stateless component. This makes it easier to write stories for stateless components.

Getting Started

Add @dump247/storybook

npm install --save-dev @dump247/storybook-state

Register the extension in addons.js.

import '@dump247/storybook-state/register';

Create a Story

Use the extension to create a story.

import React from 'react';
import { storiesOf } from '@storybook/react';
import { withState } from '@dump247/storybook-state';

storiesOf('Checkbox', module).add(
  'with check',
  withState({ checked: false })(({ store }) => (
      label="Test Checkbox"
      onChange={(checked) => store.set({ checked })}



initialState is the initial state of the component. This is an object where each key is a state value to set.

storyFn is the function that produces the story component. This function receives the story context object { store: Store } as the parameter.

This extension can be composed with other storybook extension functions:

withState({ initialState: '' })(
  withInfo(`Some cool info`)(
    ({ store }) => <MyComponent {...store.state} />

Store API


Object that contains the current state.


Set the given state keys. The state parameter is an object with the keys and values to set.

This only sets/overwrites the specific keys provided.


Reset the store to the initial state.


This project includes a storybook panel that displays the current state and allows for resetting the state.

Panel Screenshot