storybook-addon-measure-viewport

The Measure Viewport addon displays the height and width of the current preview's viewport. Useful for fine-tuning responsive breakpoints.

Installation

1. Install the addon as a devDependency.

1// Install with NPM
2npm install -D storybook-addon-measure-viewport
3
4// Install with Yarn
5yarn add -D storybook-addon-measure-viewport

2. Add storybook-addon-measure-viewport to the addons array in .storybook/main.js.

1// storybook/main.js
2
3module.exports = {
4  addons: [
5    "addon-a",
6    "addon-b",
7    "storybook-addon-measure-viewport", // Heads up! Order matters.
8    "addon-c",
9  ],
10};

The order of the addon array determines where the Measure Viewport button shows up in the toolbar.

Configuration

The Measure Viewport addon is pre-configured and sets all color, display, and measure options out of the box. If you want to have control, you can configure via measureViewport parameter.

API

Configure Measure Viewport with the following parameters.measureViewport properties. All properties are optional.

measureViewport	Options	Description	Default
.color	css color	Sets color for both width and height measurements	#e9004e
.height.color	css color	Sets color for only height measurement	#e9004e
.height.display	left , middle , right , or none	Positions vertical, height measurement (use none to hide)	left
.height.measure	innerHeight or clientHeight	Determines how measure is calculated (use innerHeight to include scroll bar)	innerHeight
.width.color	css color	Sets color for width only measurement	#e9004e
.width.display	top , middle , bottom , none	Positions horizontal, width measurement (use none to hide)	top
.width.measure	innerWidth or clientWidth	Determines how measure is calculated (use innerWidth to include scroll bar)	innerWidth

🖥 Scroll bars can be tricky! If you want to include scroll bars in your measurements, use innerHeight or innerWidth. If you do NOT want to include scroll bars in your measurements, use clientHeight or clientWidth.

Configure globally

To configure for all storybook stories, set the measureViewport global parameter in .storybook/preview.js.

1export const parameters = {
2  measureViewport: {
3    color: "DarkCyan", // this is overridden by height.color & width.color
4    height: {
5      color: "rgba(0,100,0,0.5)",
6      display: "right",
7      measure: "clientHeight",
8    },
9    width: {
10      color: "#0033cc55",
11      display: "bottom",
12      measure: "clientWidth",
13    },
14  },
15};

Configure at the story level

You can also configure at the story level using parameter inheritance.

1// Button.stories.js
2
3// Set options for all Button stories in module
4export default {
5  title: "Button",
6  parameters: {
7    measureViewport: {
8      color: "DarkCyan", // this is overridden by height.color & width.color
9      height: {
10        color: "rgba(0,100,0,0.5)",
11        display: "middle",
12        measure: "clientHeight",
13      },
14      width: {
15        color: "#0033cc55",
16        display: "middle",
17        measure: "innerWidth",
18      },
19    },
20  },
21};
22
23// Disable height measure in Button/Large story only
24export const Large = Template.bind({});
25Large.parameters = {
26  measureViewport: {
27    height: {
28      display: "none",
29    },
30  },
31};

Inspiration

• Measure
• Viewport