0.0.19 • Published 1 year ago
@sethwebster/react-fps-counter v0.0.19
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.
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
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
0.0.19
1 year ago
0.0.18
1 year ago
0.0.17
1 year ago
0.0.16
1 year ago
0.0.15
1 year ago
0.0.14
1 year ago
0.0.13
1 year ago
0.0.12
1 year ago
0.0.11
1 year ago
0.0.10
1 year ago
0.0.9
1 year ago
0.0.8
1 year ago
0.0.7
1 year ago
0.0.6
1 year ago
0.0.5
1 year ago
0.0.4
1 year ago
0.0.3
1 year ago
0.0.2-3
1 year ago
0.0.2-2
1 year ago
0.0.2-1
1 year ago
0.0.2
1 year ago
0.0.1
1 year ago