New
Integrate Next.js and Storybook automaticallyAutomate with Chromatic
Star75,440
Back to integrations
Add your integration
Categories
  • ⭐️ Popular
  • 🧩 Essentials
  • 🛠 Code
  • ⚡️ Data & state
  • ✅ Test
  • 💅 Style
  • 🎨 Design
  • ⚙️ Appearance
  • 🗄 Organize
How to install addons Create an addon
storybook-ruler-addon
This addon add a vertical and horizontal ruler to your storybook.
npm install storybook-ruler-addon
Last updated over 3 years ago
2
Downloads per week
Readme View on GitHub

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', () => ...)
Join the community
5,858 developers and counting
WhyWhy StorybookComponent-driven UI
Open source software
Storybook

Maintained by
Chromatic
Special thanks to Netlify and CircleCI