Pixel Perfect
Build pixel perfect components by adding an overlaying image of component in Storybook's preview iframe.
Storybook Addon Pixel Perfect
Build pixel perfect components by adding an overlaying image of component in Storybook's preview iframe.
Live example. Try to toggle eye button in the Storybook toolbar and "Pixel Perfect" panel.
Features
- Overlay rendering.
- Overlay visibility toggling.
- Overlay opacity customization.
- Overlay color inversion toggling.
- Overlay options resetting.
Getting Started
Installation
npm install -D pixel-perfect-storybook-addon
Or
yarn add -D pixel-perfect-storybook-addon
Then, update .storybook/main.js with the following (Find out more here):
// .storybook/main.js
module.exports = {
addons: ["pixel-perfect-storybook-addon"],
};
Usage
In parameters of your stories:
parameters: {
pixelPerfect: {
overlay: {
src: "path/to/overlay",
opacity: 0.5,
colorInversion: true,
},
},
},
Options
Name | Type | Default | Description |
---|---|---|---|
overlay.src |
string | Path to the overlay image. This can be any string that the src attribute of the HTML img element accepts. |
|
overlay.opacity |
number | 0.5 | Opacity of the overlay. |
overlay.colorInversion |
boolean | true | If true colors of the overlay are inverted. The effect is the same as using the CSS filter property with the value invert(1) . |
Made by
- hubciorz
Work with
Angular
Ember
HTML
Preact
React
React native
Svelte
Vue
Web Components
Tags