rooks

• 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

• 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
• useWebLocksApi – Hook for coordinating operations across tabs/workers with Web Locks API
• useSpeech – Speech synthesis hook for React
• useVibrate – Vibration API hook for React

• useRenderCount – Get the render count of a component

• 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
• useOnStartTyping – Fires a callback when the user starts typing outside editable fields (input, textarea, contenteditable). Supports filtering for a-z and 0-9 keys.
• 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

• useFileDropRef – Drop files easily

• 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.

• 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.

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

• 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

• 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

• 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.

• 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

• 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

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

• useSuspenseNavigatorBattery – Suspense-enabled hook for getting battery status information from Navigator Battery API
• useSuspenseNavigatorUserAgentData – Suspense-enabled hook for getting high entropy values from Navigator User Agent Data API
• useSuspenseLocalStorageState – Suspense-enabled hook for localStorage state management with cross-tab synchronization
• useSuspenseSessionStorageState – Suspense-enabled hook for sessionStorage state management with proper serialization

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

✅ Collection of 99 hooks as standalone modules.

✅ Standalone package with all the hooks at one place

✅ Built for ESM

npm i -s rooks

Import any hook from “rooks” and start using them!

import { useDidMount } from "rooks";

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

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

MIT

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 💻
Michael Moore 💻	Moritz Brandes 💻	Som Shekhar Mukherjee 💻	cursor[bot] 💻	JulianWielga 💻

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