Story Container Switcher
Allows you to switch between story containers
npm install storybook-addon-story-container-switcher
28
Downloads per week

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
      ]
    }