Overview

TL;DR

• It is a collection of React hooks
• Motivations:
  • Make common tasks easier
  • Why create these hooks on every project? 🐌
    Just install this package 🚀
• Why choose this package?
  • Simple, no over-abstraction
  • Only 1.6 kB in size
  • Tree-shakeable to remove unused modules from production builds
  • TypeScript 🟦
  • SSR-friendly 🌐
  • Unit tested 🧪

https://bundlephobia.com/package/react-power-ups

---

• 557.0B
  useCountDown
• 445.0B
  useDebounce
• 283.0B
  useDebounceFn
• 244.0B
  useFirstRender
• 574.0B
  useInView
• 498.0B
  useIntersection
• 295.0B
  useIsomorphicLayoutEffect
• 658.0B
  useLocalStorage
• 220.0B
  usePrevious
• 362.0B
  usePreviousDistinct
• 563.0B
  useSessionStorage
• 477.0B
  useThrottle
• 301.0B
  useThrottleFn
• 227.0B
  useToggle
• 297.0B
  useUpdateEffect
• 295.0B
  useWindowEvent

---

Getting Started

npm

npm i react-power-ups

yarn

yarn add react-power-ups

pnpm

pnpm i react-power-ups

---

Hook List

State 🚥

• useToggle

  Easily toggle or set a boolean state.

  💡 show/hide modal, show/hide password

• useCountDown

  Start, pause, resume, and reset a countdown timer.

  💡 display a countdown timer, limit certain action within a time frame like resend OTP

• useFirstRender

  Check if component is on first render (just mounted).

  💡 do something only on first render or vice versa

• usePrevious

  Get the previous state or prop based on the value from previous render.

  💡 when you need the value of the previous state/prop

• usePreviousDistinct

  Get the previous state or prop based on the comparation with current value.

  💡 when you need the value of the previous state/prop

• useUpdateEffect

  Like useEffect hook, but skip on first render.

  💡 do something when a state updated

• useIsomorphicLayoutEffect

  Same as useLayoutEffect, but will not show warning in Next.js (SSR).

Event 🗓

• useIntersection

  Tracks an HTML element's intersection.

  💡 detect if user has reached the bottom of page to load more data (infinite scroll)

• useInView

  Tracks an HTML element's visibility on screen or a specified element.

  💡 display something differently depending on whether an element is visible on screen or not

• useWindowEvent

  Add event listener to window.

  💡 do something when window received a post-message, user switch tab (window blur event), and many more

Optimization 🚀

• useDebounce

  Get debounced value.

  💡 limit state update to prevent calling API multiple times

• useDebounceFn

  Debounces a function.

  💡 limit the times a function is called, like limiting API call function when user is typing

• useThrottle

  Get throttled value.

  💡 limit state update to prevent calling API multiple times

• useThrottleFn

  Throttles a function.

  💡 limit the times a function is called, like limiting API call function when user is typing

Storage 🗄

• useLocalStorage

  Like useState but persisted on localStorage, SSG/SSR-friendly.

  💡 manage theme, language, etc.

• useSessionStorage

  Like useState but persisted on sessionStorage, SSG/SSR-friendly.

  💡 manage temporary value

---

Changelog

https://github.com/afiiif/react-power-ups/releases