npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@virzen/storybook-addon-responsive-views

v3.0.4

Published

View your Storybook stories in a range of responsive viewports

Downloads

6

Readme

@virzen/storybook-addon-responsive-views

IT'S A FORK

This is a fork of vizeat/storybook-addon-responsive-views. It was created for two reasons:

  1. it didn't work in latest storybook,
  2. it had some arbitrary values hardcoded.

I'm publishing it for my use, but as soon as the original maintainer becomes active I'm fine with takin it down.

Original description

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

Compatibility: currently this addon works with React only. You can voice support for Angular and other frameworks in #6, or even better: send a PR adding support for it.

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