Web Vitals react hook

Bring web vitals quickly into your react project

May thanks to Stafan Judis for his web-vitals-element where i borrowed a few lines and ideas 😁

Install

npm i web-vitals-react-hook 

You can use the hook or use the component

Use the hook

import { useWebVitals } from 'web-vitals-react-hook'

const metrics = useWebVitals() // uses all metrics: CLS FCP FID LCP TTFB

or define your own list

const metrics = useWebVitals(['FCP', 'TTFB'])

The metrics you get will include the values from web-vitals plus the evaluation.

Most valueble props:

{ 
  name,
  explainerURL,
  longName,
  supported,
  rating,
  unit,
  value,
}

Use the component

The component will give you a list with name, linked short name and value.

import { WebVitals } from 'web-vitals-react-hook'

Basic usage

<WebVitals />

Override vitals list

<WebVitals vitals={['FCP', 'TTFB']} />

Styling

To style the element you can either override the internal components
for example:

<WebVitals ValueComponent={YourCustomValue} />

You can also style the internal components with emotion

import styled from '@emotion/styled'
import { WebVitals, Value } from 'web-vitals-react-hook'

const CustomValue = styled(Value)`
  font-weight: bold;
`

<WebVitals ValueComponent={CustomValue} />

Or add your css to the classes

.WebVitals {
  ...
}

.WebVitals-name {
  ...
}

.WebVitals-shortName {
  ...
}

.WebVitals-link {
  ...
}

.WebVitals-value {
  ...
}

Contributing

If you're having issues using this component or have an idea how to optimize this module, please open an issue.

License

This project is released under MIT license.