Storybook-addon-measure-viewport NPM

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.

storybook-addon-measure-viewport

Installation

1. Install the addon as a devDependency.

// Install with NPM
npm install -D storybook-addon-measure-viewport

// Install with Yarn
yarn add -D storybook-addon-measure-viewport

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

// storybook/main.js

module.exports = {
  addons: [
    "addon-a",
    "addon-b",
    "storybook-addon-measure-viewport", // Heads up! Order matters.
    "addon-c",
  ],
};

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.

export const parameters = {
  measureViewport: {
    color: "DarkCyan", // this is overridden by height.color & width.color
    height: {
      color: "rgba(0,100,0,0.5)",
      display: "right",
      measure: "clientHeight",
    },
    width: {
      color: "#0033cc55",
      display: "bottom",
      measure: "clientWidth",
    },
  },
};

Configure at the story level

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

// Button.stories.js

// Set options for all Button stories in module
export default {
  title: "Button",
  parameters: {
    measureViewport: {
      color: "DarkCyan", // this is overridden by height.color & width.color
      height: {
        color: "rgba(0,100,0,0.5)",
        display: "middle",
        measure: "clientHeight",
      },
      width: {
        color: "#0033cc55",
        display: "middle",
        measure: "innerWidth",
      },
    },
  },
};

// Disable height measure in Button/Large story only
export const Large = Template.bind({});
Large.parameters = {
  measureViewport: {
    height: {
      display: "none",
    },
  },
};