storybook-addon-scissors

4.0.2 • Public • Published

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

Package Sidebar

Install

npm i storybook-addon-scissors

Weekly Downloads

67

Version

4.0.2

License

ISC

Unpacked Size

14.7 kB

Total Files

5

Last publish

Collaborators

  • peterpanen