{"id":48246775,"url":"https://github.com/afiiif/react-power-ups","last_synced_at":"2026-04-04T20:38:38.465Z","repository":{"id":37011981,"uuid":"495144319","full_name":"afiiif/react-power-ups","owner":"afiiif","description":"🌟 Collection of simple React hooks","archived":false,"fork":false,"pushed_at":"2023-11-01T11:29:26.000Z","size":2709,"stargazers_count":50,"open_issues_count":8,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-09-19T13:37:40.525Z","etag":null,"topics":["hooks","react","utilities"],"latest_commit_sha":null,"homepage":"https://afiiif.github.io/react-power-ups/","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/afiiif.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}},"created_at":"2022-05-22T18:31:14.000Z","updated_at":"2025-07-05T19:24:29.000Z","dependencies_parsed_at":"2023-02-19T07:00:33.899Z","dependency_job_id":"6243d3bc-94d9-4a76-8f79-eaac2c830d3a","html_url":"https://github.com/afiiif/react-power-ups","commit_stats":{"total_commits":143,"total_committers":4,"mean_commits":35.75,"dds":"0.46853146853146854","last_synced_commit":"82cc53ea6d2d729a47b198f1948846aabe0014ff"},"previous_names":[],"tags_count":38,"template":false,"template_full_name":null,"purl":"pkg:github/afiiif/react-power-ups","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/afiiif%2Freact-power-ups","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/afiiif%2Freact-power-ups/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/afiiif%2Freact-power-ups/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/afiiif%2Freact-power-ups/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/afiiif","download_url":"https://codeload.github.com/afiiif/react-power-ups/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/afiiif%2Freact-power-ups/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31413282,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-04T20:09:54.854Z","status":"ssl_error","status_checked_at":"2026-04-04T20:09:44.350Z","response_time":60,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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":["hooks","react","utilities"],"created_at":"2026-04-04T20:38:38.005Z","updated_at":"2026-04-04T20:38:38.448Z","avatar_url":"https://github.com/afiiif.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React Power-Ups 🌟\n\nCollection of simple React hooks to speed-up your React app development.\n\n![npm bundle size](https://img.shields.io/bundlephobia/min/react-power-ups)\n![npm bundle size](https://img.shields.io/bundlephobia/minzip/react-power-ups)\n\nDocumentation: https://afiiif.github.io/react-power-ups\n\n## Installation\n\n```sh\nnpm install react-power-ups\n# or with yarn\nyarn add react-power-ups\n```\n\n## Hooks List\n\n[img-demo]: https://img.shields.io/badge/demo-%20%20%20%F0%9F%9A%80-green.svg\n\n### State 🚥\n\n- [`useToggle`](./src/use-toggle.ts) [![][img-demo]](https://afiiif.github.io/react-power-ups/docs/use-toggle#examples)  \n  Easily toggle or set a boolean state.  \n  \u003csup\u003e💡 Common use case: show/hide modal, show/hide password\u003c/sup\u003e\n\n- [`useCountDown`](./src/use-count-down.ts) [![][img-demo]](https://afiiif.github.io/react-power-ups/docs/use-count-down#examples)  \n  Start, pause, resume, and reset a countdown timer.  \n  \u003csup\u003e💡 Common use case: display a countdown timer, limit certain action within a time frame like resend OTP\u003c/sup\u003e\n\n- [`useFirstRender`](./src/use-first-render.ts) [![][img-demo]](https://afiiif.github.io/react-power-ups/docs/use-first-render#examples)  \n  Check if component is just mounted (on first render).  \n  \u003csup\u003e💡 Common use case: do something only on first render or vice versa\u003c/sup\u003e\n\n- [`usePrevious`](./src/use-previous.ts) [![][img-demo]](https://afiiif.github.io/react-power-ups/docs/use-previous#examples)  \n  Get the previous state or prop based on the value from previous render.  \n  \u003csup\u003e💡 Common use case: when you need the value of the previous state/prop\u003c/sup\u003e\n\n- [`usePreviousDistinct`](./src/use-previous-distinct.ts) [![][img-demo]](https://afiiif.github.io/react-power-ups/docs/use-previous-distinct#examples)  \n  Get the previous state or prop based on the comparation with current value.  \n  \u003csup\u003e💡 Common use case: when you need the value of the previous state/prop\u003c/sup\u003e\n\n- [`useUpdateEffect`](./src/use-update-effect.ts) [![][img-demo]](https://afiiif.github.io/react-power-ups/docs/use-update-effect#examples)  \n  Like `useEffect` hook, but skip on first mount.  \n  \u003csup\u003e💡 Common use case: do something when a state updated\u003c/sup\u003e\n\n- [`useIsomorphicLayoutEffect`](./src/use-isomorphic-layout-effect.ts)  \n  Same as `useLayoutEffect`, but will not show warning in Next.js.\n\n### Event 🗓\n\n- [`useIntersection`](./src/use-intersection.ts) [![][img-demo]](https://afiiif.github.io/react-power-ups/docs/use-intersection#examples)  \n  Tracks an HTML element's intersection.  \n  \u003csup\u003e💡 Common use case: detect if user has reached the bottom of page to load more data (infinite scroll)\u003c/sup\u003e\n\n- [`useInView`](./src/use-in-view.ts) [![][img-demo]](https://afiiif.github.io/react-power-ups/docs/use-in-view#examples)  \n  Tracks an HTML element's visibility on screen or a specified element.  \n  \u003csup\u003e💡 Common use case: display something differently depending on whether an element is visible on screen or not\u003c/sup\u003e\n\n- [`useWindowEvent`](./src/use-window-event.ts) [![][img-demo]](https://afiiif.github.io/react-power-ups/docs/use-window-event#examples)  \n  Add event listener to window.  \n  \u003csup\u003e💡 Common use case: do something when window received a post-message, user switch tab (window blur event), and many more\u003c/sup\u003e\n\n### Optimization 🚀\n\n- [`useDebounce`](./src/use-debounce.ts) [![][img-demo]](https://afiiif.github.io/react-power-ups/docs/use-debounce#examples)  \n  Get debounced value.  \n  \u003csup\u003e💡 Common use case: limit state update to prevent calling API multiple times\u003c/sup\u003e\n\n- [`useDebounceFn`](./src/use-debounce-fn.ts) [![][img-demo]](https://afiiif.github.io/react-power-ups/docs/use-debounce-fn#examples)  \n  Debounces a function.  \n  \u003csup\u003e💡 Common use case: limit the times a function is called, like limiting API call function when user is typing\u003c/sup\u003e\n\n- [`useThrottle`](./src/use-throttle.ts) [![][img-demo]](https://afiiif.github.io/react-power-ups/docs/use-throttle#examples)  \n  Get throttled value.  \n  \u003csup\u003e💡 Common use case: limit state update to prevent calling API multiple times\u003c/sup\u003e\n\n- [`useThrottleFn`](./src/use-throttle-fn.ts) [![][img-demo]](https://afiiif.github.io/react-power-ups/docs/use-throttle-fn#examples)  \n  Throttles a function.  \n  \u003csup\u003e💡 Common use case: limit the times a function is called, like limiting API call function when user is typing\u003c/sup\u003e\n\n### Storage 🗄\n\n- [`useLocalStorage`](./src/use-local-storage.ts) [![][img-demo]](https://afiiif.github.io/react-power-ups/docs/use-local-storage#examples)  \n  Like `useState` but persisted on `localStorage`, SSG/SSR-friendly.  \n  \u003csup\u003e💡 Common use case: manage theme, language, etc.\u003c/sup\u003e\n\n- [`useSessionStorage`](./src/use-session-storage.ts) [![][img-demo]](https://afiiif.github.io/react-power-ups/docs/use-session-storage#examples)  \n  Like `useState` but persisted on `sessionStorage`, SSG/SSR-friendly.  \n  \u003csup\u003e💡 Common use case: manage temporary value\u003c/sup\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fafiiif%2Freact-power-ups","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fafiiif%2Freact-power-ups","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fafiiif%2Freact-power-ups/lists"}