/storybook-addon-scissors

React Storybook addon for showcasing stories in containers mimicking device sizes

Primary LanguageJavaScript

⚠️ WARNING: This repo is no longer maintained!⚠️

Storybook Addon Scissors

alt text

Requires storybook version 3+

Install

npm i -D storybook-addon-scissors

Usage

  • Download and import device list from ChromeDevTools devices (or bring your own with instructions below)
  • Create or open .storybook/addons.js and register the addon like below.
// addons.js
import '@storybook/addon-actions/register';
import registerScissors from 'storybook-addon-scissors';
import devicesJSON from './devices.json';

// registerScissors() takes an array of device objects with the following signature:
// [{
//   uid: String (must be unique)
//   title: String
//   width: Number
//   height: Number
// }]
// In the case of using the device list from ChromeDevTools,
// we can map them the following way.
const devices = devicesJSON.extensions.map(({ device }) => ({
  uid: device.title,
  title: device.title,
  width: device.screen.vertical.width,
  height: device.screen.vertical.height,
}));

registerScissors(devices);