storybook-states

Visually drive out component states in Storybook

What is this?

Wrap your component and use an array of states to drive out different variations in Storybook.

Installation

yarn add storybook-states

Usage

export const Example = () => (
  <States<ButtonProps>
    states={[
      {},
      { children: "Goodbye" },
      { outlined: true },
      { outlined: false }
    ]}
  >
    <Button onClick={action("clicked")}>Hello</Button>
  </States>
);

View the example stories for more usage details.

Interface

const States: <T>({
  states,
  children,
  styles,
  ...rest
}: Props<T>) => JSX.Element;