https://github.com/afiiif/react-power-ups
🌟 Collection of simple React hooks
https://github.com/afiiif/react-power-ups
hooks react utilities
Last synced: 3 months ago
JSON representation
🌟 Collection of simple React hooks
- Host: GitHub
- URL: https://github.com/afiiif/react-power-ups
- Owner: afiiif
- License: mit
- Created: 2022-05-22T18:31:14.000Z (about 4 years ago)
- Default Branch: main
- Last Pushed: 2023-11-01T11:29:26.000Z (over 2 years ago)
- Last Synced: 2025-09-19T13:37:40.525Z (10 months ago)
- Topics: hooks, react, utilities
- Language: TypeScript
- Homepage: https://afiiif.github.io/react-power-ups/
- Size: 2.58 MB
- Stars: 50
- Watchers: 2
- Forks: 0
- Open Issues: 8
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# React Power-Ups 🌟
Collection of simple React hooks to speed-up your React app development.
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