https://github.com/dzucconi/storybook-states

Visually drive out component states in Storybook
https://github.com/dzucconi/storybook-states

react storybook

Last synced: 20 days ago
JSON representation

Visually drive out component states in Storybook

• Host: GitHub
• URL: https://github.com/dzucconi/storybook-states
• Owner: dzucconi
• License: mit
• Created: 2020-02-26T20:44:04.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2025-09-25T18:51:59.000Z (24 days ago)
• Last Synced: 2025-09-25T20:56:53.118Z (24 days ago)
• Topics: react, storybook
• Language: TypeScript
• Homepage: https://www.npmjs.com/package/storybook-states
• Size: 1.46 MB
• Stars: 4
• Watchers: 2
• Forks: 0
• Open Issues: 41
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# storybook-states

Visually drive out component states in Storybook

[![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg)](https://github.com/semantic-release/semantic-release) [![npm](https://img.shields.io/npm/v/storybook-states)](https://www.npmjs.com/package/storybook-states) [![Build Status](https://travis-ci.org/dzucconi/storybook-states.svg?branch=master)](https://travis-ci.org/dzucconi/storybook-states)

## What is this?

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

## Installation

```bash

yarn add storybook-states

```

## Usage

```tsx

export const Example = () => (

  

    states={[

      {},

      { children: "Goodbye" },

      { outlined: true },

      { outlined: false }

    ]}

  >

    Hello

  

);

```

![Example](http://static.damonzucconi.com/_capture/15NictAbjHIX.png)

[View the example stories](https://github.com/dzucconi/storybook-states/blob/master/stories/States.stories.tsx) for more usage details.

## Interface

```typescript

const States: ({

  states,

  children,

  styles,

  ...rest

}: Props) => JSX.Element;

```