Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/dump247/storybook-state
Manage component state in React storybook.
https://github.com/dump247/storybook-state
react reactjs storybook
Last synced: 3 months ago
JSON representation
Manage component state in React storybook.
- Host: GitHub
- URL: https://github.com/dump247/storybook-state
- Owner: dump247
- License: mit
- Archived: true
- Created: 2017-11-28T05:40:44.000Z (about 7 years ago)
- Default Branch: master
- Last Pushed: 2020-10-21T21:02:02.000Z (over 4 years ago)
- Last Synced: 2024-11-09T05:13:28.629Z (3 months ago)
- Topics: react, reactjs, storybook
- Language: JavaScript
- Size: 1.26 MB
- Stars: 76
- Watchers: 3
- Forks: 17
- Open Issues: 17
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Storybook State
*This project is no longer being maintained. The recommended replacement is the useState hook in React 16+.*
An extension for [Storybook](https://storybook.js.org/) that manages the state of a stateless
component. This makes it easier to write stories for stateless components.
## Getting Started
### Add @dump247/storybook
```sh
npm install --save-dev @dump247/storybook-state
```
Register the extension in `addons.js`.
```javascript
import '@dump247/storybook-state/register';
```
### Create a Story
Use the extension to create a story.
```jsx
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 }) => (
store.set({ checked })}
/>
)),
);
```
## Extension
### `withState(initialState)(storyFn)`
`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:
```jsx
withState({ initialState: '' })(
withInfo(`Some cool info`)(
({ store }) =>
)
)
```
## Store API
### `store.state`
Object that contains the current state.
### `store.set(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.
### `store.reset()`
Reset the store to the initial state.
## Panel
This project includes a storybook panel that displays the current state and allows
for resetting the state.
