Storybook Addon Measure
Storybook addon for inspecting layouts and visualizing the box model.
- Hold down the modifier key:
- MacOS: ⌥ Option
- Windows: Alt
-
Hover over a DOM node
-
Storybook will display the dimensions of the selected element—margin, padding, border, width and height—in pixels.
Usage
-
This addon requires Storybook 6.3 or later. Install the latest with npx sb upgrade --prerelease
-
Install the addon:
npm i -D @storybook/addon-measure
- Add
"@storybook/addon-measure"
to the addons array in your .storybook/main.js
:
module.exports = {
addons: ["@storybook/addon-measure"],
};
Inspiration
Contributing
Development scripts
Clone the repository and install dependencies.
yarn
yarn start
runs babel in watch mode and starts Storybookyarn build
build and package your addon code
Release Management
Setup
This project is configured to use auto for release management. It generates a changelog and pushes it to both GitHub and npm. Therefore, you need to configure access to both:
NPM_TOKEN
Create a token with both Read and Publish permissions.GH_TOKEN
Create a token with the repo
scope.
Add them to the .env
file at the root of your project:
GH_TOKEN=<value you just got from GitHub>
NPM_TOKEN=<value you just got from npm>
Creating a releasing
To create a release locally you can run the following command, otherwise the GitHub action will make the release for you.
yarn release
That will:
- Build and package the addon code
- Bump the version
- Push a release to GitHub and npm
- Push a changelog to GitHub