❤Never Publish Malarkey

npm

JoinLog In
Need private packages and team management tools?Check out npm Orgs. »

@storybook/addon-viewport

5.1.9 • Public • Published

Storybook Viewport Addon

Storybook Viewport Addon allows your stories to be displayed in different sizes and layouts in Storybook. This helps build responsive components inside of Storybook.

Framework Support

Screenshot

Installation

Install the following npm module:

npm i --save-dev @storybook/addon-viewport

or with yarn:

yarn add -D @storybook/addon-viewport

Then, add following content to .storybook/addons.js

import '@storybook/addon-viewport/register';

You should now be able to see the viewport addon icon in the the toolbar at the top of the screen.

Configuration

The viewport addon is configured by story parameters with the viewport key. To configure globally, import addParameters from your app layer in your config.js file.

import { addParameters } from '@storybook/react';
 
addParameters({ viewport: { viewports: newViewports } });

Options can take a object with the following keys:

defaultViewport : String

Setting this property to, let say iphone6, will make iPhone 6 the default device/viewport for all stories. Default is 'responsive' which fills 100% of the preview area.

viewports : Object

A key-value pair of viewport's key and properties (see Viewport definition below) for all viewports to be displayed. Default is INITIAL_VIEWPORTS

Viewport Model

{
  /**
   * name to display in the dropdown
   * @type {String} 
   */
  name: 'Responsive',
 
  /**
   * Inline styles to be applied to the story (iframe).
   * styles is an object whose key is the camelCased version of the style name, and whose
   * value is the style’s value, usually a string
   * @type {Object} 
   */
  styles: {
    width: '100%',
    height: '100%',
  },
 
  /**
   * type of the device (e.g. desktop, mobile, or tablet)
   * @type {String} 
   */
  type: 'desktop',
}

Configuring per component or story

Parameters can be configured for a whole set of stories or a single story via the standard parameter API:

import addStories from '@storybook/react';
 
addStories('Stories', module)
  // To set a default viewport for all the stories for this component
  .addParameters({ viewport: { defaultViewport: 'iphone6' }})
  .add('story', () => </>, { viewport: { defaultViewport: 'iphonex' }});

Examples

Use Custom Set of Devices

This will replace all previous devices with Kindle Fire 2 and Kindle Fire HD by simply calling addParameters with the two devices as viewports in config.js file in your .storybook directory.

import { addParameters } from '@storybook/react';
 
const newViewports = {
  kindleFire2: {
    name: 'Kindle Fire 2',
    styles: {
      width: '600px',
      height: '963px',
    },
  },
  kindleFireHD: {
    name: 'Kindle Fire HD',
    styles: {
      width: '533px',
      height: '801px',
    },
  },
};
 
addParameters({
  viewport: { viewports: newViewports },
});

Add New Device

This will add both Kindle Fire 2 and Kindle Fire HD to the list of devices. This is acheived by making use of the exported INITIAL_VIEWPORTS property, by merging it with the new viewports and pass the result as viewports to configureViewport function

import { addParameters } from '@storybook/react';
import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport';
 
const newViewports = {
  kindleFire2: {
    name: 'Kindle Fire 2',
    styles: {
      width: '600px',
      height: '963px',
    },
  },
  kindleFireHD: {
    name: 'Kindle Fire HD',
    styles: {
      width: '533px',
      height: '801px',
    },
  },
};
 
addParameters({
  viewport: {
    viewports: {
      ...INITIAL_VIEWPORTS,
      ...newViewports,
    },
  },
});

Keywords

install

npm i @storybook/addon-viewport

Downloadsweekly downloads

250,300

version

5.1.9

license

MIT

homepage

github.com

repository

Gitgithub

last publish

collaborators

  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar

Test with RunKit

Report a vulnerability