Visually drive out component states in Storybook
Wrap your component and use an array of states to drive out different variations in Storybook.
yarn add storybook-states
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.
const States: <T>({
states,
children,
styles,
...rest
}: Props<T>) => JSX.Element;