New
NextJS, SvelteKit, Remix and the future of StorybookAutomate with Chromatic
Star75,387
Back to integrations
Add your integration
Categories
  • ⭐️ Popular
  • 🧩 Essentials
  • 🛠 Code
  • ⚡️ Data & state
  • ✅ Test
  • 💅 Style
  • 🎨 Design
  • ⚙️ Appearance
  • 🗄 Organize
How to install addons Create an addon
storybook-addon-responsive-views
View your Storybook stories in a range of responsive viewports
npm install storybook-addon-responsive-views
Last updated almost 3 years ago
1.2k
Downloads per week
Readme View on GitHub

storybook-addon-responsive-views

View your Storybook stories in a range of responsive viewports

When developing responsive applications, it's often the edges of breakpoints which cause the most issues. This Storybook addon lets you preview your components/stories at a variety of breakpoints, so that you can be sure that your webapp will look great no matter what screen size ✨

Screenshot of 'Responsive Views' Storybook addon

Installation

Install the following npm module

yarn add storybook-addon-responsive-views

Basic usage

withResponsiveViews is added as a decorator to your stories.

First, register the addon in addons.js. This gives you access to toggle the views on/off in the Storybook toolbar.

import 'storybook-addon-responsive-views/register'

Then you can either add it globally to all stories, or to a story individually

// Globally in .storybook/config.js
import { addDecorator } from '@storybook/react'
import { withResponsiveViews } from 'storybook-addon-responsive-views'

addDecorator(withResponsiveViews)

or

// In a .story file
import { withResponsiveViews } from 'storybook-addon-responsive-views'

storiesOf('Component', module)
  .addDecorator(withResponsiveViews)
  .add(...)

Breakpoint config

By default, there are two breakpoints set: tablet at 768px, and desktop at 1024px. For each breakpoint, withResponsiveViews will create a view at 1px below the breakpoint and the breakpoint itself, as well as a 320px minimum view.

To set your own breakpoints, pass an object to the withResponsiveViews decorator. This can be done both on the global or local level by passing in a breakpoints object. You can add as many breakpoints as you like, with any key name you want. The key name is used in the view title. An example:

addDecorator(
  withResponsiveViews({
    mobile: 425,
    tablet: 750,
    desktop: 1000,
    large: 1200,  
  })
)

Responsive views

Your responsive views will appear beneath your story component, so that you can see how it looks at various sizes. To toggle the views on/off, use the Responsive Views toggle in the Storybook toolbar

Accessing document and window

Each responsive view is rendered within an iFrame. To access the document and window properties for each iFrame, you'll need to import context into your story, and pass the document/window as a prop. For example:

import { ResponsiveViewContextConsumer } from 'storybook-addon-responsive-views'

storiesOf('Component', module)
  .add(
    'MediaQuery',
      () => {
        return (
          <ResponsiveViewContextConsumer>
            {({ document, window }) => <Component window={window} />}
          </ResponsiveViewContextConsumer>
        )
      }
    )
  )
Join the community
5,862 developers and counting
WhyWhy StorybookComponent-driven UI
Open source software
Storybook

Maintained by
Chromatic
Special thanks to Netlify and CircleCI