Collection of awesome react hooks
npm install rooks



!GitHub release (latest by date)
!GitHub
!Codecov branch
!npm
!npm bundle size
!Module
!node-lts


!GitHub stars
target="_blank"
rel="noopener noreferrer"
href="https://vercel.com?utm_source=rooks&utm_campaign=oss"
>
* Quick Start
* Why Rooks?
* Popular Hooks
* All Hooks by Category
* Features
* Installation
* Usage
* Contributors
* License
Get up and running in seconds:
``bash`
npm install rooksor
yarn add rooksor
pnpm add rooks
Import any hook and start using it:
`tsx
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 (
๐ Browse all hooks โข ๐ฎ Try in CodeSandbox
โจ Why Rooks?
๐ฏ
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
๐ Popular Hooks
$3
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')
$3
useKey
Keyboard event handling
useOutsideClick
Detect clicks outside element
useOnClickRef
Click handler with ref
$3
useDidMount
componentDidMount equivalent
useWillUnmount
componentWillUnmount equivalent
useDebounce
Debounce any value
List of all hooks
๐ฌ Animation & Timing - 10 hooks
* 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
๐ Browser APIs - 16 hooks
* 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
๐ ๏ธ Development & Debugging - 1 hook
* useRenderCount - Get the render count of a component
๐ Events - 16 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
* 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
๐ Form & File Handling - 3 hooks
* 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
โจ๏ธ 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 - 11 hooks
* 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.
๐ฑ๏ธ Mouse & Touch - 3 hooks
* useMouse - Mouse position hook for React.
* useMouseMoveDelta - Tracks delta of mouse move
* useMouseWheelDelta - Tracks delta of mouse move
โก Performance & Optimization - 5 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
* useWebWorker - Web Worker management with message passing
โ๏ธ 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 - 14 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.
* 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
๐ง 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 - 5 hooks
* 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
* useSuspenseIndexedDBState - Suspense-enabled hook for IndexedDB state management with structured data storage and cross-tab synchronization
โ ๏ธ Experimental hooks may be removed or significantly changed in any release without notice. Use with caution in production.
Features
โ
Collection of 120 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!
`jsx
import { useDidMount } from "rooks";
`Usage
`jsx
function App() {
useDidMount(() => {
alert("mounted");
});
return (
Hello CodeSandbox
Start editing to see some magic happen!
);
}
``Package containing all the hooks is over here. - Docs and Npm Install
MIT

Thanks goes to these wonderful people (emoji key):
View all 63 contributors