@storybook/addon-measure
Advanced tools
Package description
The @storybook/addon-measure npm package is a Storybook addon used for measuring and inspecting elements in a Storybook UI. This tool is particularly useful for developers and designers to ensure precise visual consistency directly within the Storybook environment. It allows users to measure dimensions, spacing, and alignment of components during the development process.
Element Measurement
This feature allows users to measure the dimensions and spacing of components. By adding the withMeasure decorator, users can toggle measurement tools in the Storybook UI to inspect the component presented in the story.
import { withMeasure } from '@storybook/addon-measure';
export default {
title: 'Your Component',
decorators: [withMeasure]
};
export const YourStory = () => <YourComponent />;Alignment Inspection
This feature enables users to check the alignment of elements within components. The decorator adds visual guides that help in aligning text, icons, or other elements accurately within the component.
import { withMeasure } from '@storybook/addon-measure';
export default {
title: 'Another Component',
decorators: [withMeasure]
};
export const AnotherStory = () => <AnotherComponent />;Similar to @storybook/addon-measure, @storybook/addon-outline provides visual tools to enhance UI development in Storybook. While @storybook/addon-measure focuses on measuring and spacing, @storybook/addon-outline helps by drawing outlines around components, which is useful for visual debugging of layout and container boundaries.
This addon is used to embed Figma or Sketch designs next to your Storybook stories, facilitating a side-by-side comparison between design files and implemented components. Unlike @storybook/addon-measure, which is more focused on in-story measurements, storybook-addon-designs bridges the gap between design and development by directly integrating design visuals.
Changelog
7.6.10
upgrade - #25642, thanks @JReinhold!Readme
Storybook addon for inspecting layouts and visualizing the box model.
Press the m key to enable the addon:
Hover over a DOM node
Storybook will display the dimensions of the selected element—margin, padding, border, width and height—in pixels.
This addon requires Storybook 6.3 or later. Measure is part of essentials and so is installed in all new Storybooks by default. If you need to add it to your Storybook, you can run:
npm i -D @storybook/addon-measure
Add "@storybook/addon-measure" to the addons array in your .storybook/main.js:
export default {
addons: ['@storybook/addon-measure'],
};
FAQs
Inspect layouts by visualizing the box model
The npm package @storybook/addon-measure receives a total of 3,752,648 weekly downloads. As such, @storybook/addon-measure popularity was classified as popular.
We found that @storybook/addon-measure demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 11 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Ecma TC39 is meeting this week and has moved key ECMAScript proposals forward, advancing Deferred Import Evaluation, Error.isError(), RegExp Escaping, and Promise.try to the next stages.
Security News
Researchers have demonstrated that teams of LLM agents can exploit zero-day vulnerabilities with a 53% success rate, and the costs of using AI to do so are rapidly becoming more affordable than hiring a human penetration tester.
Security News
In an unprecedented surge, May 2024 saw the publication of over 5,000 CVEs, marking a historic milestone in cybersecurity with an average of 164 CVEs per day, nearly double the 2023 daily average.