Package Exports

@figliolia/react-metrics
@figliolia/react-metrics/dist/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@figliolia/react-metrics) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

React Metrics

React bindings for @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 <MetricStart />, <MetricStop />, <MetricSubscription />, as well as their React hook equivalents!

Installation

npm i -S @figliolia/react-metrics
# or
yarn add @figliolia/react-metrics

Getting Started

StartMetric & StopMetric

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 (
      <Fragment>
        <StartMetric metric={MyMetric}> // Calls your Metric's start() method on mount
        <Spinner />
      </Fragment>
    );
  }
 
  return (
    <Fragment>
      <InteractiveUI data={data} />
      <StopMetric metric={MyMetric} /> // Calls your Metric's stop() method on mount
    </Fragment>
  );
}

useStartMetric & useStopMetric

Swapping your <StartMetric /> for useStartMetric():

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 <Spinner />;
  }

  return (
    <InteractiveUI data={data} />
    // Stop Metric when the UI is fully interactive!
    <StopMetric metric={MyMetric} />
  );
}

Swapping your <StopMetric /> for useStopMetric():

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 (
    <ol>
      {data.map(item => {
        return <li key={item}>{item}</li>
      })}
    </ol>
  );
}

MetricSubscription & useMetricSubscription

Metrics provide pub-sub functionality useful for executing behaviors based upon the completion, success, failure, or duration of a given Metric. The <MetricSubscription> 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:

import type { Metric } from "@figliolia/metrics";
import { MetricSubscription } from "@figliolia/metrics";
 
const DurationDisplay: FC<{ metric: Metric<any, any >}> = ({ metric }) => {
  const [duration, setDuration] = useState<number | null>(null);
 
  return (
    <Fragment>
      <MetricSubscription
        event="stop"
        metric={metric}
        callback={metric => {
          setDuration(metric.duration)
        }} />
      {
        duration === null ?
         <div>{metric.name} is currently {metric.status}</div>
        :
         <div>{metric.name} is complete! The duration was {duration} milliseconds</div>
      }
    </Fragment>
  );
}

Similarly, the same functionality can be achieved using the useMetricSubscription() hook:

import type { Metric } from "@figliolia/metrics";
import { useMetricSubscription } from "@figliolia/metrics";
 
const DurationDisplay: FC<{ metric: Metric<any, any>}> = ({ metric }) => {
  const [duration, setDuration] = useState<number | null>(null);
 
  useMetricSubscription({
    metric,
    event: "stop",
    callback: (metric) => {
      setDuration(metric.duration);
    }
  });
 
  if(duration === null) {
    return <div>{metric.name} is currently {metric.status}</div>
  }
 
  return <div>{metric.name} is complete! The duration was {duration} milliseconds</div>
}

Demo Application

To find some recipes in an example application, please reference our Demo App