Need help with react-storybook-addon-props-combinations?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

evgenykochetkov
134 Stars 19 Forks 64 Commits 15 Opened issues

Description

Given possible values for each prop, renders your component with all combinations of prop values.

Services available

!
?

Need anything else?

Contributors list

# 98,622
React
tableau
Clojure
lodash
47 commits
# 110,761
batch
dataloa...
GraphQL
Vue.js
2 commits
# 664,109
React
JavaScr...
Storybo...
1 commit
# 58,024
alfred
seleniu...
test-fr...
python-...
1 commit
# 20,645
mutatio...
Express
TypeScr...
HTML
1 commit

npm version npm Build Status

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.

Live storybook demo

Installation

Install it:

npm i -D react-storybook-addon-props-combinations

Then 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)

Basic usage

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', some elements] } ))

Options

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 |

Included Combination Modifiers

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.

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.