New
Integrate Next.js and Storybook automaticallyAutomate with Chromatic
Star75,440
Back to integrations
Add your integration
Categories
  • ⭐️ Popular
  • 🧩 Essentials
  • 🛠 Code
  • ⚡️ Data & state
  • ✅ Test
  • 💅 Style
  • 🎨 Design
  • ⚙️ Appearance
  • 🗄 Organize
How to install addons Create an addon
Story Container Switcher
Allows you to switch between story containers
npm install storybook-addon-story-container-switcher
Last updated 7 months ago
179
Downloads per week
Readme View on GitHub

Story Container Switcher

NPM version NPM downloads bundle size MIT license

A Storybook plugin that allows you to view your stories inside different container components like Modal, Dialog, Drawer or even better — all at once.

Demo

Live example | Example repository

https://user-images.githubusercontent.com/28081510/169690828-11dc284b-5500-4ee9-ae01-4feb73ff453d.mp4

Installation

Install the following npm module:

npm i --save-dev storybook-addon-story-container-switcher

or with yarn:

yarn add -D storybook-addon-story-container-switcher

Configuration

You need to configure the plugin before it can be used in the Storybook.

  1. Add the addon to the addons list in .storybook/main.js

    module.exports = {
        addons: [
            // all other addons
            'storybook-addon-story-container-switcher'
        ]
    };
    
  2. Add the parameters to the .storybook/preview.js

    export const parameters = {
      storyContainers: [
        {
          id: "modal",
          label: "Modal",
          container: YourFavoriteModal
        },
        // more containers
      ]
    }
    
Join the community
5,858 developers and counting
WhyWhy StorybookComponent-driven UI
Open source software
Storybook

Maintained by
Chromatic
Special thanks to Netlify and CircleCI