Storybook Ruler Addon

This addon add a vertical and horizontal ruler to your storybook.

This version is finally stable and doesn't throw any minified react error anymore, I'd like to apologise for any inconvenience caused.

Installation

Go to your project file and execute the following commands:

Using npm:

npm i storybook-ruler-addon

Using yarn:

yarn add storybook-ruler-addon

Embed into Storybook

Add the addon to your addon.js file in the .storybook directory:

// .storybook/addon.js
 
import 'storybook-ruler-addon/register'

Then add the decorator to your config.js file in the .storybook directory:

// .storybook/config.js
 
import { addDecorator } from '@storybook/react'
import withRuler from 'storybook-ruler-addon'
 
...
 
 
addDecorator(withRuler)
 

Or add the decorator to your stories individually:

// stories.js
 
import withRuler from 'storybook-ruler-addon'
 
...
 
 
storiesOf('myFoler/myComponent', module)
    .addDecorator(withRuler)
    .add('myStory', () => ...)