@reshepe-web-vitals/react

react reshepe web vitals package

monitor real user experience (RUM) and web vitals data

installation

simply install @reshepe-web-vitals using your package manager

compatible with react 18 and above and react-router-dom 6

npm i @reshepe-web-vitals/react

usage

import component in your main.tsx file

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

createRoot(document.getElementById('root')).render(
    <BrowserRouter basename={'/'}>
        <Routes>
            ...
        </Routes>
        <WebVitals apiKey={'your-reshepe-public-api-key'} />
    </BrowserRouter>,
);

api key

to get your reshepe public api key create project and go to settings

where you can find reshepe api keys

development mode

if you don't want to send data to reshepe while you are developing your application you can use development mode by adding development prop to component

it will prevent data from being sent to reshepe server

<WebVitals apiKey={'your-reshepe-public-api-key'}
           development={true} />

soft navigations

if you want to monitor web vitals data for soft navigations you can use report-soft-navigation prop

<WebVitals apiKey={'your-reshepe-public-api-key'}
           reportSoftNavigation={true} />

toolbar

toolbar is a handy helper for developers to monitor web vitals data

we keep it as a separate export to not bloat your bundle size

to enable it you need to add import in your main.tsx file

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

createRoot(document.getElementById('root')).render(
    <BrowserRouter basename={'/'}>
        <Routes>
            ...
        </Routes>
        <WebVitals apiKey={'your-reshepe-public-api-key'} /> 
        <Toolbar />
    </BrowserRouter>,
);