@sethwebster/react-fps-counter

React Fps Counter

This package provides a component to overlay of the number of FPS (frames per second) of your React page.

You can see the current FPS, and the average FPS over a number of frames.

Code Sandbox | Demo

Basic Usage

If you want to measure FPS across your entire React App, it's best to place the FPSCounter component at the root of your app. Otherwise, if you only want to measure a specific component or page, place the component there.

import { useState } from 'react';
import FPSCounter from '@sethwebster/react-fps-counter';

function App() {
  const [fpsVisible, setFpsVisible] = useState(true)
  return (
    <div>
    ...
    <FPSCounter visible={fpsVisible}/>
    ...
    </div>
  )
}

Options

Option	Default	Notes
visible	false	Controls the visibility of the component
targetFrameRate	60	Specifies the desired number of frames per second. Used to calculate the graph.
position	top-left	Controls the position of the component. Possible values are: top-left, top-right, bottom-left, bottom-right
samplePeriod	1000	Specifies how long each sample period should be in milliseconds. Smaller numbers sample more often. Every frame is captured, but when calculating the average, the samplePeriod is used.
numberOfFramesForAverage	5	The number of frames to sample for an average.
colorTiers	{ 0.1: "red", 0.35: "orange", 0.5: "yellow", 0.75: "green" }	The colors to use in the graph, and the appropriate threshold for each color. Thresholds are specified in percentage of the specified targetFrameRate.
useAnimationFrames	true	Specifies whether to use window.requestAnimationFrame or not. It is highly recommended, for accuracy's sake, to leave this true.

Advanced Usage

import { useState } from 'react';
import FPSCounter from '@sethwebster/react-fps-counter';

function App() {
  const [fpsVisible, setFpsVisible] = useState(true)
  return (
    <div>
    ...
    <FPSCounter 
      visible={fpsVisible} 
      {/* sample every 100ms */}
      samplePeriod={100} 
      {/* average every 100 frames */}
      numberOfFramesForAverage={100} 
      {/* specify a more restrictive set of thresholds */}
      colorTiers={{
        0.3: "red",
        0.4: "orange",
        0.6: "yellow",
        0.9: "green",
      }}
    />
    ...
    </div>
  )
}

Using Frame Data

It is possible to use the frame data yourself without the overlay, if you desire.

...
import { useFps } from '@sethwebster/react-fps-counter';
...

function Component() {
  const fpsData = useFps(/* {samplePeriod: number, numberOfFramesForAverage: number } */);

  return <div>
    <span>fps: {fps.fps}</span>
    {" "} 
    <span>avg: {fps.avg}</span>
  </div>
}

License

MIT