# react-power-ups > Collection of simple React hooks Latest version **3.1.4** (published 2023-10-17) · MIT license · 0 weekly downloads ## Install ```sh npm install react-power-ups pnpm add react-power-ups yarn add react-power-ups bun add react-power-ups ``` ## Health **Score 30/100 (F)** — status: abandoned. Positive: has types; esm support; no vulnerabilities; high quality score. Warnings: low downloads. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 3.1.4 | | Published | 2023-10-17 | | First published | 2022-05-22 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | bundled | | Module format | ESM + CommonJS | | Dependencies | 0 | | Unpacked size | 68.8 KB | | Known vulnerabilities | 0 | | Install scripts | no | | GitHub stars | 49 | | Author | Muhammad Afifudin | | Maintainers | afifu | | Keywords | react, hooks, utilities | ## Links - npm: https://www.npmjs.com/package/react-power-ups - Repository: https://github.com/afiiif/react-power-ups - Homepage: https://afiiif.github.io/react-power-ups/docs/overview - Issues: https://github.com/afiiif/react-power-ups/issues - npm.io page: https://npm.io/package/react-power-ups ## Alternatives - [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads - [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads - [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads - [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads - [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads ## Recent versions - 3.1.4 (latest) — 2023-10-17 - 3.1.4-beta.1 (beta) — 2023-10-17 - 3.1.3 — 2023-08-23 - 3.1.3-beta.1 — 2023-08-23 - 3.1.2 — 2023-08-22 - 3.1.2-beta.1 — 2023-08-22 - 3.1.1 — 2023-08-14 - 3.1.1-beta.1 — 2023-08-14 - 3.1.0 — 2023-04-18 - 3.1.0-beta.2 — 2023-04-18 - 3.1.0-beta.1 — 2023-04-17 - 3.0.0 — 2023-04-06 - 3.0.0-beta.5 — 2023-04-05 - 3.0.0-beta.4 — 2023-03-15 - 3.0.0-beta.3 — 2023-03-14 - … 23 more at https://npm.io/package/react-power-ups/versions ## README # React Power-Ups 🌟 Collection of simple React hooks to speed-up your React app development. ![npm bundle size](https://img.shields.io/bundlephobia/min/react-power-ups) ![npm bundle size](https://img.shields.io/bundlephobia/minzip/react-power-ups) Documentation: https://afiiif.github.io/react-power-ups ## Installation ```sh npm install react-power-ups # or with yarn yarn add react-power-ups ``` ## Hooks List [img-demo]: https://img.shields.io/badge/demo-%20%20%20%F0%9F%9A%80-green.svg ### State 🚥 - [`useToggle`](./src/use-toggle.ts) [![][img-demo]](https://afiiif.github.io/react-power-ups/docs/use-toggle#examples) Easily toggle or set a boolean state. 💡 Common use case: show/hide modal, show/hide password - [`useCountDown`](./src/use-count-down.ts) [![][img-demo]](https://afiiif.github.io/react-power-ups/docs/use-count-down#examples) Start, pause, resume, and reset a countdown timer. 💡 Common use case: display a countdown timer, limit certain action within a time frame like resend OTP - [`useFirstRender`](./src/use-first-render.ts) [![][img-demo]](https://afiiif.github.io/react-power-ups/docs/use-first-render#examples) Check if component is just mounted (on first render). 💡 Common use case: do something only on first render or vice versa - [`usePrevious`](./src/use-previous.ts) [![][img-demo]](https://afiiif.github.io/react-power-ups/docs/use-previous#examples) Get the previous state or prop based on the value from previous render. 💡 Common use case: when you need the value of the previous state/prop - [`usePreviousDistinct`](./src/use-previous-distinct.ts) [![][img-demo]](https://afiiif.github.io/react-power-ups/docs/use-previous-distinct#examples) Get the previous state or prop based on the comparation with current value. 💡 Common use case: when you need the value of the previous state/prop - [`useUpdateEffect`](./src/use-update-effect.ts) [![][img-demo]](https://afiiif.github.io/react-power-ups/docs/use-update-effect#examples) Like `useEffect` hook, but skip on first mount. 💡 Common use case: do something when a state updated - [`useIsomorphicLayoutEffect`](./src/use-isomorphic-layout-effect.ts) Same as `useLayoutEffect`, but will not show warning in Next.js. ### Event 🗓 - [`useIntersection`](./src/use-intersection.ts) [![][img-demo]](https://afiiif.github.io/react-power-ups/docs/use-intersection#examples) Tracks an HTML element's intersection. 💡 Common use case: detect if user has reached the bottom of page to load more data (infinite scroll) - [`useInView`](./src/use-in-view.ts) [![][img-demo]](https://afiiif.github.io/react-power-ups/docs/use-in-view#examples) Tracks an HTML element's visibility on screen or a specified element. 💡 Common use case: display something differently depending on whether an element is visible on screen or not - [`useWindowEvent`](./src/use-window-event.ts) [![][img-demo]](https://afiiif.github.io/react-power-ups/docs/use-window-event#examples) Add event listener to window. 💡 Common use case: do something when window received a post-message, user switch tab (window blur event), and many more ### Optimization 🚀 - [`useDebounce`](./src/use-debounce.ts) [![][img-demo]](https://afiiif.github.io/react-power-ups/docs/use-debounce#examples) Get debounced value. 💡 Common use case: limit state update to prevent calling API multiple times - [`useDebounceFn`](./src/use-debounce-fn.ts) [![][img-demo]](https://afiiif.github.io/react-power-ups/docs/use-debounce-fn#examples) Debounces a function. 💡 Common use case: limit the times a function is called, like limiting API call function when user is typing - [`useThrottle`](./src/use-throttle.ts) [![][img-demo]](https://afiiif.github.io/react-power-ups/docs/use-throttle#examples) Get throttled value. 💡 Common use case: limit state update to prevent calling API multiple times - [`useThrottleFn`](./src/use-throttle-fn.ts) [![][img-demo]](https://afiiif.github.io/react-power-ups/docs/use-throttle-fn#examples) Throttles a function. 💡 Common use case: limit the times a function is called, like limiting API call function when user is typing ### Storage 🗄 - [`useLocalStorage`](./src/use-local-storage.ts) [![][img-demo]](https://afiiif.github.io/react-power-ups/docs/use-local-storage#examples) Like `useState` but persisted on `localStorage`, SSG/SSR-friendly. 💡 Common use case: manage theme, language, etc. - [`useSessionStorage`](./src/use-session-storage.ts) [![][img-demo]](https://afiiif.github.io/react-power-ups/docs/use-session-storage#examples) Like `useState` but persisted on `sessionStorage`, SSG/SSR-friendly. 💡 Common use case: manage temporary value --- _Source: https://npm.io/package/react-power-ups · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._