# pixel-perfect-storybook-addon

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

Latest version **0.2.0** (published 2022-12-16) · MIT license · 0 weekly downloads

## Install

```sh
npm install pixel-perfect-storybook-addon
pnpm add pixel-perfect-storybook-addon
yarn add pixel-perfect-storybook-addon
bun add pixel-perfect-storybook-addon
```

## Health

**Score 30/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.2.0 |
| Published | 2022-12-16 |
| First published | 2022-12-09 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 4 |
| Unpacked size | 81.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 3 |
| Author | Timur Svoboda |
| Maintainers | timka-svoboda |
| Keywords | storybook-addons, pixel, pefect, style, design, appearance, storybook-addons |

## Links

- npm: https://www.npmjs.com/package/pixel-perfect-storybook-addon
- Repository: https://github.com/timur-svoboda/pixel-perfect-storybook-addon
- Homepage: https://github.com/timur-svoboda/pixel-perfect-storybook-addon#readme
- Issues: https://github.com/timur-svoboda/pixel-perfect-storybook-addon/issues
- npm.io page: https://npm.io/package/pixel-perfect-storybook-addon

## Dependencies (4)

- [@mui/material](https://npm.io/package/@mui/material.md) 5.11.0
- [@emotion/react](https://npm.io/package/@emotion/react.md) 11.10.5
- [@emotion/styled](https://npm.io/package/@emotion/styled.md) 11.10.5
- [@mui/icons-material](https://npm.io/package/@mui/icons-material.md) 5.11.0

## Recent versions

- 0.2.0 (latest) — 2022-12-16
- 0.1.0 — 2022-12-09

## README

# Storybook Addon Pixel Perfect

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

[Live example](https://639313fc4b277f76b849dc95-mxzmajchdy.chromatic.com/). 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.

## Usage

In parameters of your stories:

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

---
_Source: https://npm.io/package/pixel-perfect-storybook-addon · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._