Story Container Switcher

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