React Power-Ups 🌟

Collection of simple React hooks to speed-up your React app development.

Documentation: https://afiiif.github.io/react-power-ups

Installation

npm install react-power-ups
# or with yarn
yarn add react-power-ups

Hooks List

State 🚥

• useToggle
  Easily toggle or set a boolean state.
  ^{💡 Common use case: show/hide modal, show/hide password}

• useCountDown
  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
  Check if component is just mounted (on first render).
  ^{💡 Common use case: do something only on first render or vice versa}

• usePrevious
  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
  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
  Like useEffect hook, but skip on first mount.
  ^{💡 Common use case: do something when a state updated}

• useIsomorphicLayoutEffect
  Same as useLayoutEffect, but will not show warning in Next.js.

Event 🗓

• useIntersection
  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
  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
  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
  Get debounced value.
  ^{💡 Common use case: limit state update to prevent calling API multiple times}

• useDebounceFn
  Debounces a function.
  ^{💡 Common use case: limit the times a function is called, like limiting API call function when user is typing}

• useThrottle
  Get throttled value.
  ^{💡 Common use case: limit state update to prevent calling API multiple times}

• useThrottleFn
  Throttles a function.
  ^{💡 Common use case: 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.
  ^{💡 Common use case: manage theme, language, etc.}

• useSessionStorage
  Like useState but persisted on sessionStorage, SSG/SSR-friendly.
  ^{💡 Common use case: manage temporary value}