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

Options

Options can be provided as 4th argument to addWithPropsCombinations or set globally using setDefaults.

Included Combination Modifiers

The following combination modifiers are included by default. If you'd like to expand this list, PRs are welcome!