{"id":13581397,"url":"https://github.com/kristiandupont/react-geiger","last_synced_at":"2025-05-14T10:10:23.246Z","repository":{"id":226776773,"uuid":"769567167","full_name":"kristiandupont/react-geiger","owner":"kristiandupont","description":"Audiolize React performance","archived":false,"fork":false,"pushed_at":"2025-04-24T10:52:01.000Z","size":294,"stargazers_count":1011,"open_issues_count":4,"forks_count":8,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-04-24T11:36:15.780Z","etag":null,"topics":["performance","profiling","react"],"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/kristiandupont.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","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,"zenodo":null}},"created_at":"2024-03-09T12:51:23.000Z","updated_at":"2025-04-19T14:54:09.000Z","dependencies_parsed_at":"2024-06-13T23:03:31.626Z","dependency_job_id":"d9249856-f23b-4341-b3bc-325b64e0f646","html_url":"https://github.com/kristiandupont/react-geiger","commit_stats":{"total_commits":16,"total_committers":3,"mean_commits":5.333333333333333,"dds":0.25,"last_synced_commit":"4d16620485774998447792da4bdb87a1c8c70492"},"previous_names":["kristiandupont/react-geiger"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kristiandupont%2Freact-geiger","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kristiandupont%2Freact-geiger/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kristiandupont%2Freact-geiger/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kristiandupont%2Freact-geiger/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/kristiandupont","download_url":"https://codeload.github.com/kristiandupont/react-geiger/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254120170,"owners_count":22017953,"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":["performance","profiling","react"],"created_at":"2024-08-01T15:02:01.173Z","updated_at":"2025-05-14T10:10:23.189Z","avatar_url":"https://github.com/kristiandupont.png","language":"TypeScript","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"readme":"# React Geiger\n\n\u003cimg src=\"./logo.png\" height=\"100\"\u003e\n\nReact Geiger is a tool for \"audiolizing\" React performance issues. You can have it running in the background and makes little clicks which will point your attention to excessive (slow) component rerenders.\n\nPlay with it in this [playground](https://playcode.io/1793073)\n\n## Installation\n\n```bash\nnpm i react-geiger\n```\n\n## Usage\n\nYou wrap whatever you want to track in the `\u003cGeiger\u003e` component, and re-renders inside will cause a click if they take longer than the threshold set (default: 50ms).\n\nThe most basic setup is wrapping your entire app:\n\n```tsx\n\u003cGeiger\u003e\n  \u003cApp /\u003e\n\u003c/Geiger\u003e\n```\n\nYou can also use it on a sub-tree wherever.\n\nThe options are:\n\n```tsx\n  profilerId?: string;\n  renderTimeThreshold?: number;\n  phaseOption?: PhaseOption;\n  customSoundFile?: string\n  enabled?: boolean;\n```\n\n- `profilerId` is an id that will be passed on to the `React.Profiler` component. You probably don't need to change this.\n- `renderTimeThreshold` is the time in milliseconds that will trigger a click. Default is 50ms. Set to 0 to make any re-render click\n- `phaseOption` is the phase of the render you want to track, either `'mount'`, `'update'` or `'both'` (which is the default)\n- `customSoundFile` path to a custom sound file, if you want to use something else than the default click sound\n- `enabled` defaults to true, but you can use this to disable it. Note that it relies on `React.Profiler` under the hood, which is disabled in production builds per default.\n\n![Not Great, Not Terrible](./not-great-not-terrible.jpg)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkristiandupont%2Freact-geiger","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkristiandupont%2Freact-geiger","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkristiandupont%2Freact-geiger/lists"}