react-storybook-addon-props-combinations

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 demo

Installation

Install it:

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

Then set the addon in your .storybook/config.js:

import { configure, setAddon } from '@kadira/storybook'

import withPropsCombinations, { setDefaults } from 'react-storybook-addon-props-combinations'

setAddon(withPropsCombinations)
setDefaults({
  // overwrite global defaults here
})

configure(() => {
  // ...
}, module)

Basic usage

import React from 'react';
import { storiesOf, action } from '@kadira/storybook';

import YourComponent from './somewhere'

storiesOf('Basics', module)
  .addWithPropsCombinations(
    'Standard usage',
    // 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

Are provided as 4th argument to addWithPropsCombinations or set globally using setDefaults

showSource

default: true

Toggles rendering of sample source for each combination.

Example source | Result

mustProvideAllProps

default: false

Ensures that possible values are provided for all props listed in propTypes.

Example source | Result

renderCombination

default implementation

A function that renders a single props combination for your component. Takes Component, props and options as arguments.

Example source | Result