/rooks

Essential React custom hooks ⚓ to super charge your components!

Primary LanguageTypeScriptMIT LicenseMIT




CI and Semantic Release GitHub GitHub release (latest by date) GitHub contributors npm npm bundle size Codecov branch node-lts Website Module




Essential React custom hooks ⚓ to super charge your components!



List of all hooks

🔥 Effects

  • useAsyncEffect - A version of useEffect that accepts an async function
  • useDidMount - componentDidMount hook for React
  • useDidUpdate - componentDidUpdate hook for react
  • useEffectOnceWhen - Runs a callback effect atmost one time when a condition becomes true
  • useIntervalWhen - Sets an interval immediately when a condition is true
  • useIsomorphicEffect - A hook that resolves to useEffect on the server and useLayoutEffect on the client.
  • useLifecycleLogger - A react hook that console logs parameters as component transitions through lifecycles.
  • useWillUnmount - componentWillUnmount lifecycle as hook for React.

🚀 Events

📝 Form

✨ Misc

  • useDebounce - Debounce hook for react
  • useDebouncedValue - Tracks another value and gets updated in a debounced way.
  • useDimensionsRef - Easily grab dimensions of an element with a ref using this hook
  • useEventListenerRef - A react hook to add an event listener to a ref
  • useForkRef - A hook that can combine two refs(mutable or callbackRefs) into a single callbackRef
  • useFreshRef - Avoid stale state in callbacks with this hook. Auto updates values using a ref.
  • useFreshTick - Like use-fresh-ref but specifically for functions
  • useMergeRefs - Merges any number of refs into a single ref
  • useRefElement - Helps bridge gap between callback ref and state
  • useRenderCount - Get the render count of a component
  • useThrottle - Throttle custom hook for React
  • useTimeoutWhen - Takes a callback and fires it when a condition is true
  • useToggle - Toggle (between booleans or custom data)hook for React.

🚃 Navigator

❇️ State

  • useArrayState - Array state manager hook for React
  • useCountdown - Count down to a target timestamp and call callbacks every second (or provided peried)
  • useCounter - Counter hook for React.
  • useGetIsMounted - Checks if a component is mounted or not at the time. Useful for async effects
  • useLocalstorageState - UseState but auto updates values to localStorage
  • useMapState - A react hook to manage state in a key value pair map.
  • useMultiSelectableList - A custom hook to easily select multiple values from a list
  • usePreviousDifferent - usePreviousDifferent returns the last different value of a variable
  • usePreviousImmediate - usePreviousImmediate returns the previous value of a variable even if it was the same or different
  • useQueueState - A React hook that manages state in the form of a queue
  • useSelect - Select values from a list easily. List selection hook for react.
  • useSelectableList - Easily select a single value from a list of values. very useful for radio buttons, select inputs etc.
  • useSessionstorageState - useState but syncs with sessionstorage
  • useSetState - Manage the state of a Set in React.
  • useStackState - A React hook that manages state in the form of a stack
  • useTimeTravelState - A hook that manages state which can undo and redo. A more powerful version of useUndoState hook.
  • useUndoState - Drop in replacement for useState hook but with undo functionality.

⚛️ UI

  • useBoundingclientrect - getBoundingClientRect hook for React.
  • useBoundingclientrectRef - A hook that tracks the boundingclientrect of an element. It returns a callbackRef so that the element node if changed is easily tracked.
  • useFullscreen - Use full screen api for making beautiful and emersive experinces.
  • useGeolocation - A hook to provide the geolocation info on client side.
  • useInViewRef - Simple hook that monitors element enters or leave the viewport that's using Intersection Observer API.
  • useIntersectionObserverRef - A hook to register an intersection observer listener.
  • useKey - keypress, keyup and keydown event handlers as hooks for react.
  • useKeyBindings - useKeyBindings can bind multiple keys to multiple callbacks and fire the callbacks on key press.
  • useKeyRef - Very similar useKey but it returns a ref
  • useKeys - A hook which allows to setup callbacks when a combination of keys are pressed at the same time.
  • useMediaMatch - Signal whether or not a media query is currently matched.
  • useMouse - Mouse position hook for React.
  • useMutationObserver - Mutation Observer hook for React.
  • useMutationObserverRef - A hook that tracks mutations of an element. It returns a callbackRef.
  • useRaf - A continuously running requestAnimationFrame hook for React
  • useResizeObserverRef - Resize Observer hook for React.
  • useWindowScrollPosition - A React hook to get the scroll position of the window
  • useWindowSize - Window size hook for React.


Features

✅ Collection of 68 hooks as standalone modules.

✅ Standalone package with all the hooks at one place

✅ CommonJS, UMD and ESM Support

Installation

npm i -s rooks

Import any hook from "rooks" and start using them!

import { useDidMount } from "rooks";

Usage

function App() {
  useDidMount(() => {
    alert("mounted");
  });
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
    </div>
  );
}

Standalone Package

Package containing all the hooks is over here. - Docs and Npm Install


License

MIT

Contributors ✨

All Contributors

Thanks goes to these wonderful people (emoji key):

Bhargav Ponnapalli
Bhargav Ponnapalli

💻 🚧
anil kumar chaudhary
anil kumar chaudhary

💻
Qiwei Yang
Qiwei Yang

💻 🚧
maciek_grzybek
maciek_grzybek

💻
Harsh Zalavadiya
Harsh Zalavadiya

💻
B V K MAHIJENDRA
B V K MAHIJENDRA

💻
Braxton Christensen
Braxton Christensen

💻
Hansel
Hansel

💻
Harshil Parmar
Harshil Parmar

💻
Lionel
Lionel

💻
Max Stoiber
Max Stoiber

💻
Michael Moore
Michael Moore

💻
Rajas Paranjpe
Rajas Paranjpe

💻
Mahendra Choudhary
Mahendra Choudhary

💻
Nghia Pham
Nghia Pham

💻
Akshay Kadam (A2K)
Akshay Kadam (A2K)

💻
Alex Golubtsov
Alex Golubtsov

💻
Arman
Arman

💻
Branden Visser
Branden Visser

💻
Brian Steere
Brian Steere

💻
Cal Courtney
Cal Courtney

💻
Chris Milson
Chris Milson

💻
Cong Zhang
Cong Zhang

💻
Daniel Holmes
Daniel Holmes

💻
Fernando Beck
Fernando Beck

💻
Josh Davenport
Josh Davenport

💻
MARCEL
MARCEL

💻
Neilor Caldeira
Neilor Caldeira

💻
Tobias Lins
Tobias Lins

💻
Tsvetan
Tsvetan

💻
Wei Zhu
Wei Zhu

💻
Yakko Majuri
Yakko Majuri

💻
Frank Hellwig
Frank Hellwig

💻
Austin Peterson
Austin Peterson

💻
thodubois
thodubois

💻
wes christiansen
wes christiansen

💻
CJ Patoilo
CJ Patoilo

💻
mar1u50
mar1u50

💻
Ayushman Gupta
Ayushman Gupta

💻
Rafael Ferreira
Rafael Ferreira

💻
Kristinn Thor Johannsson
Kristinn Thor Johannsson

💻
Michael Moore
Michael Moore

💻
Trevor Blades
Trevor Blades

💻
official_dulin
official_dulin

💻
Billy Mosis Priambodo
Billy Mosis Priambodo

💻
Stafford Williams
Stafford Williams

💻
Chanhee Kim
Chanhee Kim

💻
Hooriza
Hooriza

💻
Nils Wittler
Nils Wittler

💻
Sebastian Szczepański
Sebastian Szczepański

💻
Mahendra Choudhary
Mahendra Choudhary

💻
Som Shekhar Mukherjee
Som Shekhar Mukherjee

💻
Qiushi Pan
Qiushi Pan

💻
Jishnu Viswanath
Jishnu Viswanath

💻
brahambence
brahambence

💻
dependabot[bot]
dependabot[bot]

💻
renovate[bot]
renovate[bot]

💻
dependabot-preview[bot]
dependabot-preview[bot]

💻
github-actions[bot]
github-actions[bot]

💻
allcontributors[bot]
allcontributors[bot]

💻
zhangenming
zhangenming

💻
Antoni Kiszka
Antoni Kiszka

💻
Greg Poole
Greg Poole

💻
mergify[bot]
mergify[bot]

💻
Chaitanya J
Chaitanya J

💻
G H Mahimaanvita
G H Mahimaanvita

💻
Danilo Woznica
Danilo Woznica

💻
dan-klasson
dan-klasson

💻
Sébastien Vanvelthem
Sébastien Vanvelthem

💻
Aleksandr Soldatov
Aleksandr Soldatov

💻
Eli Yukelzon
Eli Yukelzon

💻

Other hooks libraries

These are some libraries that I constantly take inspiration and ideas from

  1. React-use
  2. React-aria
  3. Valtio
  4. Jotai
  5. Recoil
  6. Downshiftjs
  7. React hook form