https://github.com/washingtonpost/storybook-addon-web-vitals

A storybook addon for instant feedback on loading, interactivity, and layout shift metrics.
https://github.com/washingtonpost/storybook-addon-web-vitals

addon cls react storybook web-vitals

Last synced: 5 days ago
JSON representation

A storybook addon for instant feedback on loading, interactivity, and layout shift metrics.

• Host: GitHub
• URL: https://github.com/washingtonpost/storybook-addon-web-vitals
• Owner: washingtonpost
• License: mit
• Created: 2021-01-15T17:19:39.000Z (almost 4 years ago)
• Default Branch: main
• Last Pushed: 2024-10-15T17:55:03.000Z (29 days ago)
• Last Synced: 2024-10-29T20:57:05.537Z (15 days ago)
• Topics: addon, cls, react, storybook, web-vitals
• Language: JavaScript
• Homepage: https://www.npmjs.com/package/@washingtonpost/storybook-addon-web-vitals
• Size: 1.14 MB
• Stars: 2
• Watchers: 19
• Forks: 1
• Open Issues: 4
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • Contributing: CONTRIBUTING.md
  • License: LICENSE
  • Code of conduct: CODE_OF_CONDUCT.md
  • Codeowners: .github/CODEOWNERS
  • Security: SECURITY.md

Awesome Lists containing this project

README

        


# Storybook Addon Web Vitals

Storybook Addon Web Vitals can be used for instant feedback on loading, interactivity, and layout shift metric for each story. We use the [web-vitals](https://github.com/GoogleChrome/web-vitals).

We report on FID, CLS, and LCP.

![React Storybook Screenshot](https://user-images.githubusercontent.com/347490/104764861-f9288e80-5735-11eb-9198-14de8a066a40.png)

## Getting Started

Requires Storybook 6.1 or later

First, install the addon

```sh

npm i -D @washingtonpost/storybook-addon-web-vitals

```

Then, add following content to [`.storybook/main.js`](https://storybook.js.org/docs/react/configure/overview#configure-your-storybook-project):

```js

module.exports = {

  addons: ["@washingtonpost/storybook-addon-web-vitals"],

};

```

### Usage

See toolbar for feedback