{"id":17803386,"url":"https://github.com/sethwebster/react-fps-counter","last_synced_at":"2025-08-04T18:41:20.986Z","repository":{"id":141311112,"uuid":"586295371","full_name":"sethwebster/react-fps-counter","owner":"sethwebster","description":null,"archived":false,"fork":false,"pushed_at":"2023-01-13T15:33:35.000Z","size":764,"stargazers_count":5,"open_issues_count":1,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-02-27T23:43:13.101Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/sethwebster.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.txt","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-01-07T16:25:19.000Z","updated_at":"2024-03-20T09:00:06.000Z","dependencies_parsed_at":"2023-06-28T14:30:18.792Z","dependency_job_id":null,"html_url":"https://github.com/sethwebster/react-fps-counter","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sethwebster%2Freact-fps-counter","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sethwebster%2Freact-fps-counter/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sethwebster%2Freact-fps-counter/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sethwebster%2Freact-fps-counter/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/sethwebster","download_url":"https://codeload.github.com/sethwebster/react-fps-counter/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243862410,"owners_count":20360136,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-10-27T12:46:39.257Z","updated_at":"2025-03-17T11:31:17.279Z","avatar_url":"https://github.com/sethwebster.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React Fps Counter\nThis package provides a component to overlay of the number of FPS (frames per second) of your React page.\n\n![What the FPS Display Looks Like](https://raw.githubusercontent.com/sethwebster/react-fps-counter/main/images/screenshot.png)\n\nYou can see the current FPS, and the average FPS over a number of frames.\n\n[Code Sandbox](https://codesandbox.io/s/admiring-haslett-hluduf) | [Demo](https://hluduf.csb.app/)\n\n## Basic Usage\nIf 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.\n\n```jsx\nimport { useState } from 'react';\nimport FPSCounter from '@sethwebster/react-fps-counter';\n\nfunction App() {\n  const [fpsVisible, setFpsVisible] = useState(true)\n  return (\n    \u003cdiv\u003e\n    ...\n    \u003cFPSCounter visible={fpsVisible}/\u003e\n    ...\n    \u003c/div\u003e\n  )\n}\n```\n\n### Options\n\u003ctable\u003e\n\u003ctr\u003e\n  \u003cth\u003eOption\u003c/th\u003e\n  \u003cth\u003eDefault\u003c/th\u003e\n  \u003cth\u003eNotes\u003c/th\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n  \u003ctd\u003evisible\u003c/td\u003e\n  \u003ctd\u003efalse\u003c/td\u003e\n  \u003ctd\u003eControls the visibility of the component\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n  \u003ctd\u003etargetFrameRate\u003c/td\u003e\n  \u003ctd\u003e60\u003c/td\u003e\n  \u003ctd\u003eSpecifies the desired number of frames per second. Used to calculate the graph.\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n  \u003ctd\u003eposition\u003c/td\u003e\n  \u003ctd\u003e\n  \n  `top-left`\n  \n  \u003c/td\u003e\n  \u003ctd\u003e\n  \n  Controls the position of the component. Possible values are: `top-left`, `top-right`, `bottom-left`, `bottom-right`\n  \n  \u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n  \u003ctd\u003esamplePeriod\u003c/td\u003e\n  \u003ctd\u003e1000\u003c/td\u003e\n  \u003ctd\u003eSpecifies how long each sample period should be in milliseconds. Smaller numbers sample more often. Every frame is captured, but when calculating the average, the \u003ccode\u003esamplePeriod\u003c/code\u003e is used.\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n  \u003ctd\u003enumberOfFramesForAverage\u003c/td\u003e\n  \u003ctd\u003e5\u003c/td\u003e\n  \u003ctd\u003eThe number of frames to sample for an average.\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n  \u003ctd\u003ecolorTiers\u003c/td\u003e\n  \u003ctd\u003e\n  \n  ```js \n  {   \n    0.1: \"red\",  \n    0.35: \"orange\",  \n    0.5: \"yellow\",  \n    0.75: \"green\" \n  }\n  ```\n  \u003c/td\u003e\n  \u003ctd\u003e\n  \n  The colors to use in the graph, and the appropriate threshold for each color. Thresholds are specified in percentage of the specified `targetFrameRate`.\n  \n  \u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n  \u003ctd\u003euseAnimationFrames\u003c/td\u003e\n  \u003ctd\u003etrue\u003c/td\u003e\n  \u003ctd\u003eSpecifies whether to use \u003ccode\u003ewindow.requestAnimationFrame\u003c/code\u003e or not. It is highly recommended, for accuracy's sake, to leave this \u003ccode\u003etrue\u003c/code\u003e.\u003c/td\u003e\n\u003c/tr\u003e\n\n\u003c/table\u003e\n\n## Advanced Usage\n\n```jsx\nimport { useState } from 'react';\nimport FPSCounter from '@sethwebster/react-fps-counter';\n\nfunction App() {\n  const [fpsVisible, setFpsVisible] = useState(true)\n  return (\n    \u003cdiv\u003e\n    ...\n    \u003cFPSCounter \n      visible={fpsVisible} \n      {/* sample every 100ms */}\n      samplePeriod={100} \n      {/* average every 100 frames */}\n      numberOfFramesForAverage={100} \n      {/* specify a more restrictive set of thresholds */}\n      colorTiers={{\n        0.3: \"red\",\n        0.4: \"orange\",\n        0.6: \"yellow\",\n        0.9: \"green\",\n      }}\n    /\u003e\n    ...\n    \u003c/div\u003e\n  )\n}\n```\n\n## Using Frame Data \nIt is possible to use the frame data yourself without the overlay, if you desire.\n\n```jsx\n...\nimport { useFps } from '@sethwebster/react-fps-counter';\n...\n\nfunction Component() {\n  const fpsData = useFps(/* {samplePeriod: number, numberOfFramesForAverage: number } */);\n\n  return \u003cdiv\u003e\n    \u003cspan\u003efps: {fps.fps}\u003c/span\u003e\n    {\" \"} \n    \u003cspan\u003eavg: {fps.avg}\u003c/span\u003e\n  \u003c/div\u003e\n}\n```\n\n![Demo of useFpsData](https://raw.githubusercontent.com/sethwebster/react-fps-counter/main/images/useFpsScreenshot.png)\n### License\n[MIT](./LICENSE.txt)","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsethwebster%2Freact-fps-counter","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsethwebster%2Freact-fps-counter","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsethwebster%2Freact-fps-counter/lists"}