/pixel-perfect-storybook-addon

Build pixel perfect components by adding an overlaying image of component in Storybook's preview iframe.

Primary LanguageJavaScriptMIT LicenseMIT

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).