This project adds a simple way to add some state to your react based stories. It provides a decorator to provide the state + an (optional) addon pane to inspect the state in realtime.
MyComponent.story.jsx
import React from 'react';
import { storiesOf } from '@storybook/react';
import { withState, State } from '@jdachtera/storybook-simple-state';
import MyComponent from './MyComponent';
storiesOf('<MyComponent>', module)
.addDecorator(withState('Hello World'))
.add('default', ({ default: [value, updateValue] }) => (
<MyComponent
value={value}
onChange={updateValue}
/>
))
.add('another one', ({ value, setValue }) => (
<MyComponent
value={value}
onChange={setValue}
/>
))
.add('with individual state', withState('Another value', ({ value, setValue }) => (
<MyComponent
value={value}
onChange={setValue}
/>
)))
.add('use as a component', () => (
<State initial="Hello" render={({ value, setValue }) => (
<MyComponent
value={value}
onChange={setValue}
/>
)}>
</State>
))
.storybook/addons.js
import { register as registerSimpleState } from '@jdachtera/storybook-simple-state';
registerSimpleState();