125+ essential React hooks — tree-shakeable, SSR-ready, TypeScript-first.
📖 Documentation · 🚀 Quick Start · 🎮 Playground · 🐛 Report Bug
We are currently only accepting contributions from verified contributors. If you wish to contribute, please open an issue first to discuss your proposed changes.
- Quick Start
- Why Rooks?
- Popular Hooks
- All Hooks by Category
- Features
- Installation
- Usage
- Contributors
- License
Get up and running in seconds:
npm install rooks
# or
yarn add rooks
# or
pnpm add rooksImport any hook and start using it:
import { useDidMount, useCounter, useToggle } from "rooks";
function App() {
const { value, increment, decrement } = useCounter(0);
const [isOn, toggleIsOn] = useToggle(false);
useDidMount(() => {
console.log("Component mounted! 🎉");
});
return (
<div>
<h1>Count: {value}</h1>
<button onClick={increment}>Increment</button>
<button onClick={decrement}>Decrement</button>
<h2>Toggle is {isOn ? "ON" : "OFF"}</h2>
<button onClick={toggleIsOn}>Toggle</button>
</div>
);
}📖 Browse all hooks • 🎮 Try in CodeSandbox
| 🎯 | Focused Each hook does one thing well |
📦 | Tree-shakeable Import only what you need |
| 🔄 | SSR Ready Works with Next.js, Remix, Gatsby |
🧪 | Well Tested 95%+ code coverage |
| 📚 | Documented Every hook has examples & demos |
⚡ | TypeScript First Full type safety out of the box |
| 🎨 | Modern Built for React 18+ with ESM |
🤝 | Community Driven 82 contributors and growing |
|
useCounter Counter with increment/decrement |
useToggle Toggle between values |
useLocalstorageState useState with localStorage sync |
const { value, increment }= useCounter(0)
|
const [on, toggle]= useToggle()
|
const [user, setUser]= useLocalstorageState('user')
|
|
useKey Keyboard event handling |
useOutsideClick Detect clicks outside element |
useOnClickRef Click handler with ref |
|
useDidMount componentDidMount equivalent |
useWillUnmount componentWillUnmount equivalent |
useDebounce Debounce any value |
| Hook | Description |
|---|---|
| useAnimation | Animation hook for React |
| useEasing | A hook for creating controlled easing animations with start/stop/reset capabilities. |
| 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. |
| usePrefersReducedMotion | A React hook that returns true if the user has enabled the 'prefers-reduced-motion' setting in their system. |
| useRaf | A continuously running requestAnimationFrame hook for React |
| useResizeObserverRef | Resize Observer hook for React. |
| useSpring | Spring animation hook for React |
| useTimeoutWhen | Takes a callback and fires it when a condition is true |
| useTween | Tween animation hook for React |
| Hook | Description |
|---|---|
| useBroadcastChannel | A React hook that provides a clean interface to the Broadcast Channel API for cross-tab/window communication |
| useClipboard | Clipboard read/write operations hook for React |
| 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 |
| useMediaRecorder | Audio/video recording from MediaStream |
| useNetworkInformation | Network connection quality detection hook for React |
| useNavigatorLanguage | Navigator Language hook for React. |
| useNotification | Browser notifications with permission handling |
| 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 |
| useShare | Web Share API for native sharing |
| useSpeech | Speech synthesis hook for React |
| useFetch | Hook for fetching data from URLs with loading states, error handling, and automatic JSON parsing |
| useVibrate | Vibration API hook for React |
| Hook | Description |
|---|---|
| useRenderCount | Get the render count of a component |
| Hook | Description |
|---|---|
| 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. |
| usePageLeave | Page leave detection with callbacks for beforeunload and visibility change |
| useWindowEventListener | Adds an event listener to window |
| Hook | Description |
|---|---|
| useCheckboxInputState | Simple checkbox state management hook that provides a boolean state and props that can be spread directly onto a checkbox input element |
| useFileDropRef | Drop files easily |
| useFormState | Comprehensive form state management with validation |
| Hook | Description |
|---|---|
| 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. |
| Hook | Description |
|---|---|
| useAsyncEffect | A version of useEffect that accepts an async function |
| useDebouncedAsyncEffect | A version of useEffect that accepts an async function and debounces its execution based on dependency changes |
| useDebouncedEffect | A version of useEffect that debounces the effect execution based on dependency changes |
| 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. |
| Hook | Description |
|---|---|
| useMouse | Mouse position hook for React. |
| useMouseMoveDelta | Tracks delta of mouse move |
| useMouseWheelDelta | Tracks delta of mouse move |
| Hook | Description |
|---|---|
| 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 |
| useWebWorker | Web Worker management with message passing |
| Hook | Description |
|---|---|
| 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 |
| useTemporalAge | Returns the calendar age from a birth date, updating at each day boundary |
| useTemporalCountdown | Returns the remaining duration until a target instant with aligned updates |
| useTemporalElapsed | Returns the elapsed duration since a start instant with aligned updates |
| useTemporalNow | Returns the current time as a Temporal value with aligned updates |
| Hook | Description |
|---|---|
| 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. |
| Hook | Description |
|---|---|
| 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. |
| useMeasure | Measures both inner and outer dimensions of any DOM element in a performant way and updates when dimensions change |
| 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 |
| usePreferredColorScheme | Color scheme preference detection (dark/light mode) |
| useVideo | Video hook for react |
| Hook | Description |
|---|---|
| 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 |
| Hook | Description |
|---|---|
| useWindowScrollPosition | A React hook to get the scroll position of the window |
| useWindowSize | Window size hook for React. |
| Hook | Description |
|---|---|
| useSuspenseNavigatorBattery | Suspense-enabled hook for getting battery status information from Navigator Battery API |
| useSuspenseFavicon | Suspense-enabled hook for reading and updating the current favicon with same-origin and external URL support |
| 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 |
| useSuspenseIndexedDBState | Suspense-enabled hook for IndexedDB state management with structured data storage and cross-tab synchronization |
✅ Collection of 125 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):
View all 82 contributors
These are some libraries that I constantly take inspiration and ideas from