The Reshepe Web Vitals package for React lets you monitor Core Web Vitals metrics real-time with ease in your React applications.

Installation

Install the React package using your preferred package manager:

npm i @reshepe-web-vitals/react

Usage

Import and render the WebVitals component in your main.tsx (or index.tsx) file:

import {
    BrowserRouter,
    Routes,
}                     from 'react-router-dom';
import { WebVitals }  from '@reshepe-web-vitals/react';

createRoot(document.getElementById('root')).render(
    <BrowserRouter basename={'/'}>
        <Routes>
            {/* your routes here */}
        </Routes>
        <WebVitals apiKey={'YOUR-RESHEPE-PUBLIC-API-KEY'} />
    </BrowserRouter>,
);

To get your Reshepe public API key:

1. Create (or select) a project in the Reshepe dashboard.
2. Go to Settings → API Keys.
3. Copy the Public API Key and use it in the api-key prop.

you can follow instructions to get your public API key here

Development Mode

Prevent data from being sent during development by adding the development prop:

<WebVitals
  apiKey="YOUR-RESHEPE-PUBLIC-API-KEY"
  development
/>

Soft Navigations

Enable monitoring of single-page-app (SPA) navigations by adding the reportSoftNavigation prop:

<WebVitals
  apiKey="YOUR-RESHEPE-PUBLIC-API-KEY"
  reportSoftNavigation
/>

Toolbar

The Toolbar component provides an on-page overlay for live metric inspection (development only). It's exported separately to avoid bloating your bundle size.

Import and render it alongside WebVitals:

import {
    BrowserRouter,
    Routes,
}                     from 'react-router-dom';
import { WebVitals, Toolbar }  from '@reshepe-web-vitals/react';

createRoot(document.getElementById('root')).render(
    <BrowserRouter basename={'/'}>
        <Routes>
            {/* your routes here */}
        </Routes>
        <WebVitals apiKey={'YOUR-RESHEPE-PUBLIC-API-KEY'} />
        <Toolbar />
    </BrowserRouter>,
);