Props Combinations addon for React Storybook
Given possible values for each prop, renders your component with all combinations of prop values. Useful for finding edge cases or just seeing all component states at once.
Install it:
npm i -D react-storybook-addon-props-combinationsThen set the addon in your .storybook/config.js:
import { configure } from '@storybook/react'
import { setDefaults } from 'react-storybook-addon-props-combinations'
setDefaults({
// overwrite global defaults here
})
configure(() => {
// ...
}, module)import React from 'react';
import { storiesOf } from '@storybook/react';
import { action } from '@storybook/addon-actions';
import withPropsCombinations from 'react-storybook-addon-props-combinations'
import YourComponent from './somewhere'
storiesOf('Basics', module)
.add('Standard usage', withPropsCombinations(
// provide your component
YourComponent,
// and an object with the shape
// {propName: arrayOfPossiblevalues}
{
disabled: [false, true],
onClick: [action('clicked')],
children: ['hello world', <b>some elements</b>]
}
))Options can be provided as 4th argument to addWithPropsCombinations or set globally using setDefaults.
| Name | Type | Default | Description | Storybooks |
|---|---|---|---|---|
CombinationRenderer |
Component |
default renderer | A component that renders a single props combination for your component. Receives Component, props and options as props. |
Source, Demo |
combinationsModifier |
function |
x => x |
A function that takes an array of generated prop combinations, does something with it (adds new combinations, removes or modifies some of existing ones, etc), and returns that modified array. See included combination modifiers below. | Source, Demo |
mustProvideAllProps |
boolean |
false |
Ensures that possible values are provided for all props listed in propTypes. | Source, Demo |
showSource |
boolean |
true |
Toggles rendering of sample source for each combination. | Source, Demo |
style |
object |
{} |
Optional styling for wrapping div of each rendered combination |
The following combination modifiers are included by default. If you'd like to expand this list, PRs are welcome!
| Name | Description |
|---|---|
withOneOfBool |
Takes an array of property names and adds more combination with one of these props set to true. For example, if we had [{ label: 'my button' }], withOneOfBool(['small', 'big']) will add { label: 'my button', small: true } and { label: 'my button', big: true }. See this story for a more detailed example. |