https://github.com/alexfigliolia/react-metrics
React bindings for @figliolia/metrics
https://github.com/alexfigliolia/react-metrics
critical-path cumulative-layout-shift metrics performance react reliability
Last synced: about 2 months ago
JSON representation
React bindings for @figliolia/metrics
- Host: GitHub
- URL: https://github.com/alexfigliolia/react-metrics
- Owner: alexfigliolia
- Created: 2023-06-08T01:42:40.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2024-08-08T20:51:30.000Z (10 months ago)
- Last Synced: 2025-02-12T01:43:25.194Z (3 months ago)
- Topics: critical-path, cumulative-layout-shift, metrics, performance, react, reliability
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/@figliolia/react-metrics
- Size: 174 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# React Metrics
React bindings for [@figliolia/metrics](https://www.npmjs.com/package/@figliolia/metrics)!
This library is designed to make integrating Metric events with React rendering simple and effective. Often times, starting or stopping a Metric or interaction begins or ends with a Component reaching the browser and rendering to the screen. For this purpose, in this package you'll find utilities such as ``, ``, ``, as well as their React hook equivalents!
## Installation
```bash
npm i -S @figliolia/react-metrics
# or
yarn add @figliolia/react-metrics
```
## Getting Started
### StartMetric & StopMetric
```tsx
import { Metric } from "@figliolia/metrics";
import { StartMetric, StopMetric } from "@figliolia/react-metrics"
const MyMetric = new Metric("My Metric");
export const MyComponent = () => {
const [data, setData] = useState(null);
useEffect(() => {
fetch("/data").then(async data => {
setData(await data.json());
});
return () => {
MyMetric.reset();
}
}, []);
if(!data) {
return (
// Calls your Metric's start() method on mount
);
}
return (
// Calls your Metric's stop() method on mount
);
}
```
### useStartMetric & useStopMetric
Swapping your `` for `useStartMetric()`:
```tsx
import { Metric } from "@figliolia/metrics";
import { useStartMetric } from "@figliolia/react-metrics";
const MyMetric = new Metric("My Metric");
export const MyComponent = () => {
const [data, setData] = useState(null);
// Start Metric on mount!
useStartMetric(MyMetric);
useEffect(() => {
fetch("/data").then(async data => {
setData(await data.json());
});
return () => {
MyMetric.reset();
}
}, []);
if(!data) {
return ;
}
return (
// Stop Metric when the UI is fully interactive!
);
}
```
Swapping your `` for `useStopMetric()`:
```tsx
import { Metric } from "@figliolia/metrics";
import { useStopMetric } from "@figliolia/react-metrics";
const MyMetric = new Metric("My Metric");
export const MyComponent: FC<{ data: string[] }> = ({ data }) => {
// Stops the provided metric on mount!
useStopMetric(MyMetric);
return (
{data.map(item => {
return - {item}
})}
);
}
```
### MetricSubscription & useMetricSubscription
Metrics provide pub-sub functionality useful for executing behaviors based upon the completion, success, failure, or duration of a given Metric. The `` and `useMetricSubscription()` utilities allow developers to declare Metric subscriptions right from their React code - and have their subscriptions bound automatically to the Component's lifecycle:
```tsx
import type { Metric } from "@figliolia/metrics";
import { MetricSubscription } from "@figliolia/metrics";
const DurationDisplay: FC<{ metric: Metric}> = ({ metric }) => {
const [duration, setDuration] = useState(null);
return (
{
setDuration(metric.duration)
}} />
{
duration === null ?
{metric.name} is currently {metric.status}
:
{metric.name} is complete! The duration was {duration} milliseconds
}
);
}
```
Similarly, the same functionality can be achieved using the `useMetricSubscription()` hook:
```tsx
import type { Metric } from "@figliolia/metrics";
import { useMetricSubscription } from "@figliolia/metrics";
const DurationDisplay: FC<{ metric: Metric}> = ({ metric }) => {
const [duration, setDuration] = useState(null);
useMetricSubscription({
metric,
event: "stop",
callback: (metric) => {
setDuration(metric.duration);
}
});
if(duration === null) {
return
{metric.name} is currently {metric.status}
}
return {metric.name} is complete! The duration was {duration} milliseconds
}
```
### Demo Application
To find some recipes in an example application, please reference our [Demo App](https://github.com/alexfigliolia/metrics-demo)