Storybook state

Warning

Storybook recently introduced a new way of building addons, the latest version of storybook-state will work with version of storybook >

v5.2.*

v1.3.6

Getting Started

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

First you will need to create a new store, to save the state and handle updates. You can add all properties which your component expects, and the State component will propagate them to your component. Once you've created the store, you can wrap your components in a

State

In the example below we create a modal which will expect an

active

active

Display and update using a State component

import React from "react";
import { storiesOf } from "@storybook/react";
import { State, Store } from "@sambego/storybook-state";

const store = new Store({
  active: false
});
const SimpleModal = props => (
  

    
      Modal content
    
     store.set({ active: !store.get("active") })} />
  


);

export default { title: "Modal" };
export const Simple = () => SimpleModal;

Display and update using a State decorator

import React from "react";
import { addDecorator, addParameters } from "@storybook/react";
import { Store, withState } from "@sambego/storybook-state";

const SimpleCounter = props => {
  return [
    
 Count: {props.count} 
,
     {props.count} 
  ];
};

const store = new Store({
  count: 0,
  handleCountUpdate: () => store.set({ count: store.get("count") + 1 })
});
addDecorator(withState());
addParameters({
  state: {
    store
  }
});
export default { title: "Counter" };
export const Simple = () => SimpleCounter;

Store

The store has a few methods you can use to get and update the state.

When creating a new instance, you can pass along the initial state.

const store = new Store({
  foo: "bar",
  active: true,
  items: ["item 1", "item 2"]
});

You can retrieve a state from the store by using the

get()

store.get("foo"); // will return 'bar'
store.get("active"); // will return true
store.get("items"); // will return ['item 1', 'item 2']

You can update the store by using the

set()

store.set({
  active: false,
  bar: "foo"
});

You can subscribe to changes in the store by using the

subscribe()

store.subscribe(state => // Do something with the updated state.

State component

The state component accepts one property, an instance of

Store

The state also allows a function as a child so you can pass the state to any prop of your components.

const store = new Store({
  active: true
});


  {state => [
    ,
    
  ]}
;

You can also manipulate the state before passing it to the children via the parseState property.

 ({ ...state, id: `#${state.uuid}` })}>
  

When using the

withState

addDecorator(withState());
addParameters({
  state: {
    store,
    parseState: state => ({ ...state, count: `foo-${state.count}` })
  }
});