rooks

Essential React custom hooks ⚓ to super charge your components!

List of all hooks

🎬 Animation & Timing - 5 hooks

• useIntervalWhen - Sets an interval immediately when a condition is true
• useLockBodyScroll - This hook locks the scroll of the body element when isLocked is set to true.
• useRaf - A continuously running requestAnimationFrame hook for React
• useResizeObserverRef - Resize Observer hook for React.
• useTimeoutWhen - Takes a callback and fires it when a condition is true

🌐 Browser APIs - 9 hooks

• useGeolocation - A hook to provide the geolocation info on client side.
• useIdleDetectionApi - Hook to detect when user is idle using Idle Detection API with polyfill
• useNavigatorLanguage - Navigator Language hook for React.
• useOnline - Online status hook for React.
• useOrientation - orientation hook for react
• useScreenDetailsApi - Hook for multi-screen information and management using Screen Details API
• useSpeech - Speech synthesis hook for React
• useVibrate - Vibration API hook for React
• useWebLocksApi - Hook for coordinating operations across tabs/workers with Web Locks API

🛠️ Development & Debugging - 2 hooks

• useRenderCount - Get the render count of a component
• useWhyDidYouUpdate - A hook that can track which value change caused a rerender

🚀 Events - 14 hooks

• useDocumentEventListener - A react hook to an event listener to the document object
• useDocumentVisibilityState - Returns the visibility state of the document.
• useFocus - Handles focus events for the immediate target element.
• useFocusWithin - Handles focus events for the target component.
• useIsDroppingFiles - Check if any files are currently being dropped anywhere. Useful for highlighting drop areas.
• useOnClickRef - Callback on click/tap events
• useOnHoverRef - On hover callback hook
• useOnLongHover - Fires a callback when an element is hovered for a while
• useOnLongPress - Fire a callback on long press
• useOnWindowResize - A React hook for adding an event listener for window resize
• useOnWindowScroll - A React hook for adding an event listener for window scroll
• useOutsideClick - Outside click(for a ref) event as hook for React.
• useOutsideClickRef - A hook that can track a click event outside a ref. Returns a callbackRef.
• useWindowEventListener - Adds an event listener to window

📝 Form & File Handling - 1 hook

• useFileDropRef - Drop files easily

⌨️ Keyboard & Input - 5 hooks

• useInput - Input hook for React.
• 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.

🔥 Lifecycle & Effects - 9 hooks

• useAsyncEffect - A version of useEffect that accepts an async function
• useDeepCompareEffect - Deep compare dependencies instead of shallow for useEffect
• useDidMount - componentDidMount hook for React
• useDidUpdate - componentDidUpdate hook for react
• useDocumentTitle - A hook to easily update document title with React
• useEffectOnceWhen - Runs a callback effect atmost one time when a condition becomes 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.

🖱️ Mouse & Touch - 3 hooks

• useMouse - Mouse position hook for React.
• useMouseMoveDelta - Tracks delta of mouse move
• useMouseWheelDelta - Tracks delta of mouse move

⚡ Performance & Optimization - 4 hooks

• useDebounce - Debounce hook for react
• useDebouncedValue - Tracks another value and gets updated in a debounced way.
• useDebounceFn - Powerful debounce function hook for React
• useThrottle - Throttle custom hook for React

❇️ State - 18 hooks

• 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
• useNativeMapState - Manage Map() object state in React
• 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
• usePromise - Promise management hook for react
• useQueueState - A React hook that manages state in the form of a queue
• useSafeSetState - set state but ignores if component has already unmounted
• 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

🔄 State History & Time Travel - 4 hooks

• useTimeTravelState - A hook that manages state which can undo and redo. A more powerful version of useUndoState hook.
• useToggle - Toggle (between booleans or custom data)hook for React.
• useUndoRedoState - Setstate but can also undo and redo
• useUndoState - Drop in replacement for useState hook but with undo functionality.

⚛️ UI - 12 hooks

• useAudio - Audio hook
• 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.
• useDimensionsRef - Easily grab dimensions of an element with a ref using this hook
• useFullscreen - Use full screen api for making beautiful and emersive experinces.
• useIntersectionObserverRef - A hook to register an intersection observer listener.
• useInViewRef - Simple hook that monitors element enters or leave the viewport that's using Intersection Observer API.
• useMediaMatch - Signal whether or not a media query is currently matched.
• useMutationObserver - Mutation Observer hook for React.
• useMutationObserverRef - A hook that tracks mutations of an element. It returns a callbackRef.
• usePictureInPictureApi - Hook for managing Picture-in-Picture video functionality
• useVideo - Video hook for react

🔧 Utilities & Refs - 7 hooks

• 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
• useFreshCallback - Avoid stale closures and keep your callback fresh
• 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

📱 Window & Viewport - 2 hooks

• useWindowScrollPosition - A React hook to get the scroll position of the window
• useWindowSize - Window size hook for React.

🧪 Experimental Hooks - 1 hook

• useSuspenseNavigatorUserAgentData - Suspense-enabled hook for getting high entropy values from Navigator User Agent Data API

⚠️ Experimental hooks may be removed or significantly changed in any release without notice. Use with caution in production.

Features

✅ Collection of 96 hooks as standalone modules.

✅ Standalone package with all the hooks at one place

⚠️ Experimental Hooks: Some hooks are marked as experimental and may be removed or significantly changed in any release without notice. Use these hooks with caution in production applications. Import experimental hooks from rooks/experimental.

✅ 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 ✨

Thanks goes to these wonderful people (emoji key):

Bhargav Ponnapalli 💻 🚧	anil kumar chaudhary 💻	Qiwei Yang 💻 🚧	maciek_grzybek 💻	Harsh Zalavadiya 💻	B V K MAHIJENDRA 💻	Braxton Christensen 💻
Hansel 💻	Harshil Parmar 💻	Lionel 💻	Max Stoiber 💻	Michael Moore 💻	Rajas Paranjpe 💻	Mahendra Choudhary 💻
Nghia Pham 💻	Akshay Kadam (A2K) 💻	Alex Golubtsov 💻	Arman 💻	Branden Visser 💻	Brian Steere 💻	Cal Courtney 💻
Chris Milson 💻	Cong Zhang 💻	Daniel Holmes 💻	Fernando Beck 💻	Josh Davenport 💻	MARCEL 💻	Neilor Caldeira 💻
Tobias Lins 💻	Tsvetan 💻	Wei Zhu 💻	Yakko Majuri 💻	Frank Hellwig 💻	Austin Peterson 💻	thodubois 💻
wes christiansen 💻	CJ Patoilo 💻	mar1u50 💻	Ayushman Gupta 💻	Rafael Ferreira 💻	Kristinn Thor Johannsson 💻	Michael Moore 💻
Trevor Blades 💻	official_dulin 💻	Billy Mosis Priambodo 💻	Stafford Williams 💻	Chanhee Kim 💻	Hooriza 💻	Nils Wittler 💻
Sebastian Szczepański 💻	Mahendra Choudhary 💻	Som Shekhar Mukherjee 💻	Qiushi Pan 💻	Jishnu Viswanath 💻	brahambence 💻	dependabot[bot] 💻
renovate[bot] 💻	dependabot-preview[bot] 💻	github-actions[bot] 💻	allcontributors[bot] 💻	zhangenming 💻	Antoni Kiszka 💻	Greg Poole 💻
mergify[bot] 💻	Chaitanya J 💻	G H Mahimaanvita 💻	Danilo Woznica 💻	dan-klasson 💻	Sébastien Vanvelthem 💻	Aleksandr Soldatov 💻
Eli Yukelzon 💻	Mahendra Choudhary 💻	Chaitanya J 💻	Dominik Dorfmeister 💻	Nghiệp 💻	Seongmin Park 💻	Nate Higgins 💻

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