* [useAnimation](https://rooks.vercel.app/docs/hooks/useAnimation) - Animation hook for React
* [useEasing](https://rooks.vercel.app/docs/hooks/useEasing) - A hook for creating controlled easing animations with start/stop/reset capabilities.
* [useIntervalWhen](https://rooks.vercel.app/docs/hooks/useIntervalWhen) - Sets an interval immediately when a condition is true
* [useLockBodyScroll](https://rooks.vercel.app/docs/hooks/useLockBodyScroll) - This hook locks the scroll of the body element when `isLocked` is set to `true`.
* [usePrefersReducedMotion](https://rooks.vercel.app/docs/hooks/usePrefersReducedMotion) - A React hook that returns true if the user has enabled the 'prefers-reduced-motion' setting in their system.
* [useRaf](https://rooks.vercel.app/docs/hooks/useRaf) - A continuously running requestAnimationFrame hook for React
* [useResizeObserverRef](https://rooks.vercel.app/docs/hooks/useResizeObserverRef) - Resize Observer hook for React.
* [useSpring](https://rooks.vercel.app/docs/hooks/useSpring) - Spring animation hook for React
* [useTimeoutWhen](https://rooks.vercel.app/docs/hooks/useTimeoutWhen) - Takes a callback and fires it when a condition is true
* [useTween](https://rooks.vercel.app/docs/hooks/useTween) - Tween animation hook for React
๐ Browser APIs - 16 hooks
* [useBroadcastChannel](https://rooks.vercel.app/docs/hooks/useBroadcastChannel) - A React hook that provides a clean interface to the Broadcast Channel API for cross-tab/window communication
* [useClipboard](https://rooks.vercel.app/docs/hooks/useClipboard) - Clipboard read/write operations hook for React
* [useGeolocation](https://rooks.vercel.app/docs/hooks/useGeolocation) - A hook to provide the geolocation info on client side.
* [useIdleDetectionApi](https://rooks.vercel.app/docs/hooks/useIdleDetectionApi) - Hook to detect when user is idle using Idle Detection API with polyfill
* [useMediaRecorder](https://rooks.vercel.app/docs/hooks/useMediaRecorder) - Audio/video recording from MediaStream
* [useNetworkInformation](https://rooks.vercel.app/docs/hooks/useNetworkInformation) - Network connection quality detection hook for React
* [useNavigatorLanguage](https://rooks.vercel.app/docs/hooks/useNavigatorLanguage) - Navigator Language hook for React.
* [useNotification](https://rooks.vercel.app/docs/hooks/useNotification) - Browser notifications with permission handling
* [useOnline](https://rooks.vercel.app/docs/hooks/useOnline) - Online status hook for React.
* [useOrientation](https://rooks.vercel.app/docs/hooks/useOrientation) - orientation hook for react
* [useScreenDetailsApi](https://rooks.vercel.app/docs/hooks/useScreenDetailsApi) - Hook for multi-screen information and management using Screen Details API
* [useWebLocksApi](https://rooks.vercel.app/docs/hooks/useWebLocksApi) - Hook for coordinating operations across tabs/workers with Web Locks API
* [useShare](https://rooks.vercel.app/docs/hooks/useShare) - Web Share API for native sharing
* [useSpeech](https://rooks.vercel.app/docs/hooks/useSpeech) - Speech synthesis hook for React
* [useFetch](https://rooks.vercel.app/docs/hooks/useFetch) - Hook for fetching data from URLs with loading states, error handling, and automatic JSON parsing
* [useVibrate](https://rooks.vercel.app/docs/hooks/useVibrate) - Vibration API hook for React
๐ ๏ธ Development & Debugging - 1 hook
* [useRenderCount](https://rooks.vercel.app/docs/hooks/useRenderCount) - Get the render count of a component
๐ Events - 16 hooks
* [useDocumentEventListener](https://rooks.vercel.app/docs/hooks/useDocumentEventListener) - A react hook to an event listener to the document object
* [useDocumentVisibilityState](https://rooks.vercel.app/docs/hooks/useDocumentVisibilityState) - Returns the visibility state of the document.
* [useFocus](https://rooks.vercel.app/docs/hooks/useFocus) - Handles focus events for the immediate target element.
* [useFocusWithin](https://rooks.vercel.app/docs/hooks/useFocusWithin) - Handles focus events for the target component.
* [useIsDroppingFiles](https://rooks.vercel.app/docs/hooks/useIsDroppingFiles) - Check if any files are currently being dropped anywhere. Useful for highlighting drop areas.
* [useOnClickRef](https://rooks.vercel.app/docs/hooks/useOnClickRef) - Callback on click/tap events
* [useOnHoverRef](https://rooks.vercel.app/docs/hooks/useOnHoverRef) - On hover callback hook
* [useOnLongHover](https://rooks.vercel.app/docs/hooks/useOnLongHover) - Fires a callback when an element is hovered for a while
* [useOnLongPress](https://rooks.vercel.app/docs/hooks/useOnLongPress) - Fire a callback on long press
* [useOnStartTyping](https://rooks.vercel.app/docs/hooks/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](https://rooks.vercel.app/docs/hooks/useOnWindowResize) - A React hook for adding an event listener for window resize
* [useOnWindowScroll](https://rooks.vercel.app/docs/hooks/useOnWindowScroll) - A React hook for adding an event listener for window scroll
* [useOutsideClick](https://rooks.vercel.app/docs/hooks/useOutsideClick) - Outside click(for a ref) event as hook for React.
* [useOutsideClickRef](https://rooks.vercel.app/docs/hooks/useOutsideClickRef) - A hook that can track a click event outside a ref. Returns a callbackRef.
* [usePageLeave](https://rooks.vercel.app/docs/hooks/usePageLeave) - Page leave detection with callbacks for beforeunload and visibility change
* [useWindowEventListener](https://rooks.vercel.app/docs/hooks/useWindowEventListener) - Adds an event listener to window
๐ Form & File Handling - 3 hooks
* [useCheckboxInputState](https://rooks.vercel.app/docs/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](https://rooks.vercel.app/docs/hooks/useFileDropRef) - Drop files easily
* [useFormState](https://rooks.vercel.app/docs/hooks/useFormState) - Comprehensive form state management with validation
โจ๏ธ Keyboard & Input - 5 hooks
* [useInput](https://rooks.vercel.app/docs/hooks/useInput) - Input hook for React.
* [useKey](https://rooks.vercel.app/docs/hooks/useKey) - keypress, keyup and keydown event handlers as hooks for react.
* [useKeyBindings](https://rooks.vercel.app/docs/hooks/useKeyBindings) - useKeyBindings can bind multiple keys to multiple callbacks and fire the callbacks on key press.
* [useKeyRef](https://rooks.vercel.app/docs/hooks/useKeyRef) - Very similar useKey but it returns a ref
* [useKeys](https://rooks.vercel.app/docs/hooks/useKeys) - A hook which allows to setup callbacks when a combination of keys are pressed at the same time.
๐ฅ Lifecycle & Effects - 11 hooks
* [useAsyncEffect](https://rooks.vercel.app/docs/hooks/useAsyncEffect) - A version of useEffect that accepts an async function
* [useDebouncedAsyncEffect](https://rooks.vercel.app/docs/hooks/useDebouncedAsyncEffect) - A version of useEffect that accepts an async function and debounces its execution based on dependency changes
* [useDebouncedEffect](https://rooks.vercel.app/docs/hooks/useDebouncedEffect) - A version of useEffect that debounces the effect execution based on dependency changes
* [useDeepCompareEffect](https://rooks.vercel.app/docs/hooks/useDeepCompareEffect) - Deep compare dependencies instead of shallow for useEffect
* [useDidMount](https://rooks.vercel.app/docs/hooks/useDidMount) - componentDidMount hook for React
* [useDidUpdate](https://rooks.vercel.app/docs/hooks/useDidUpdate) - componentDidUpdate hook for react
* [useDocumentTitle](https://rooks.vercel.app/docs/hooks/useDocumentTitle) - A hook to easily update document title with React
* [useEffectOnceWhen](https://rooks.vercel.app/docs/hooks/useEffectOnceWhen) - Runs a callback effect atmost one time when a condition becomes true
* [useIsomorphicEffect](https://rooks.vercel.app/docs/hooks/useIsomorphicEffect) - A hook that resolves to useEffect on the server and useLayoutEffect on the client.
* [useLifecycleLogger](https://rooks.vercel.app/docs/hooks/useLifecycleLogger) - A react hook that console logs parameters as component transitions through lifecycles.
* [useWillUnmount](https://rooks.vercel.app/docs/hooks/useWillUnmount) - componentWillUnmount lifecycle as hook for React.
๐ฑ๏ธ Mouse & Touch - 3 hooks
* [useMouse](https://rooks.vercel.app/docs/hooks/useMouse) - Mouse position hook for React.
* [useMouseMoveDelta](https://rooks.vercel.app/docs/hooks/useMouseMoveDelta) - Tracks delta of mouse move
* [useMouseWheelDelta](https://rooks.vercel.app/docs/hooks/useMouseWheelDelta) - Tracks delta of mouse move
โก Performance & Optimization - 5 hooks
* [useDebounce](https://rooks.vercel.app/docs/hooks/useDebounce) - Debounce hook for react
* [useDebouncedValue](https://rooks.vercel.app/docs/hooks/useDebouncedValue) - Tracks another value and gets updated in a debounced way.
* [useDebounceFn](https://rooks.vercel.app/docs/hooks/useDebounceFn) - Powerful debounce function hook for React
* [useThrottle](https://rooks.vercel.app/docs/hooks/useThrottle) - Throttle custom hook for React
* [useWebWorker](https://rooks.vercel.app/docs/hooks/useWebWorker) - Web Worker management with message passing
โ๏ธ State - 22 hooks
* [useArrayState](https://rooks.vercel.app/docs/hooks/useArrayState) - Array state manager hook for React
* [useCountdown](https://rooks.vercel.app/docs/hooks/useCountdown) - Count down to a target timestamp and call callbacks every second (or provided peried)
* [useCounter](https://rooks.vercel.app/docs/hooks/useCounter) - Counter hook for React.
* [useGetIsMounted](https://rooks.vercel.app/docs/hooks/useGetIsMounted) - Checks if a component is mounted or not at the time. Useful for async effects
* [useLocalstorageState](https://rooks.vercel.app/docs/hooks/useLocalstorageState) - UseState but auto updates values to localStorage
* [useMapState](https://rooks.vercel.app/docs/hooks/useMapState) - A react hook to manage state in a key value pair map.
* [useMultiSelectableList](https://rooks.vercel.app/docs/hooks/useMultiSelectableList) - A custom hook to easily select multiple values from a list
* [useNativeMapState](https://rooks.vercel.app/docs/hooks/useNativeMapState) - Manage Map() object state in React
* [usePreviousDifferent](https://rooks.vercel.app/docs/hooks/usePreviousDifferent) - usePreviousDifferent returns the last different value of a variable
* [usePreviousImmediate](https://rooks.vercel.app/docs/hooks/usePreviousImmediate) - usePreviousImmediate returns the previous value of a variable even if it was the same or different
* [usePromise](https://rooks.vercel.app/docs/hooks/usePromise) - Promise management hook for react
* [useQueueState](https://rooks.vercel.app/docs/hooks/useQueueState) - A React hook that manages state in the form of a queue
* [useSafeSetState](https://rooks.vercel.app/docs/hooks/useSafeSetState) - set state but ignores if component has already unmounted
* [useSelect](https://rooks.vercel.app/docs/hooks/useSelect) - Select values from a list easily. List selection hook for react.
* [useSelectableList](https://rooks.vercel.app/docs/hooks/useSelectableList) - Easily select a single value from a list of values. very useful for radio buttons, select inputs etc.
* [useSessionstorageState](https://rooks.vercel.app/docs/hooks/useSessionstorageState) - useState but syncs with sessionstorage
* [useSetState](https://rooks.vercel.app/docs/hooks/useSetState) - Manage the state of a Set in React.
* [useStackState](https://rooks.vercel.app/docs/hooks/useStackState) - A React hook that manages state in the form of a stack
* [useTemporalAge](https://rooks.vercel.app/docs/hooks/useTemporalAge) - Returns the calendar age from a birth date, updating at each day boundary
* [useTemporalCountdown](https://rooks.vercel.app/docs/hooks/useTemporalCountdown) - Returns the remaining duration until a target instant with aligned updates
* [useTemporalElapsed](https://rooks.vercel.app/docs/hooks/useTemporalElapsed) - Returns the elapsed duration since a start instant with aligned updates
* [useTemporalNow](https://rooks.vercel.app/docs/hooks/useTemporalNow) - Returns the current time as a Temporal value with aligned updates
๐ State History & Time Travel - 4 hooks
* [useTimeTravelState](https://rooks.vercel.app/docs/hooks/useTimeTravelState) - A hook that manages state which can undo and redo. A more powerful version of useUndoState hook.
* [useToggle](https://rooks.vercel.app/docs/hooks/useToggle) - Toggle (between booleans or custom data)hook for React.
* [useUndoRedoState](https://rooks.vercel.app/docs/hooks/useUndoRedoState) - Setstate but can also undo and redo
* [useUndoState](https://rooks.vercel.app/docs/hooks/useUndoState) - Drop in replacement for useState hook but with undo functionality.
โ๏ธ UI - 14 hooks
* [useAudio](https://rooks.vercel.app/docs/hooks/useAudio) - Audio hook
* [useBoundingclientrect](https://rooks.vercel.app/docs/hooks/useBoundingclientrect) - getBoundingClientRect hook for React.
* [useBoundingclientrectRef](https://rooks.vercel.app/docs/hooks/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](https://rooks.vercel.app/docs/hooks/useDimensionsRef) - Easily grab dimensions of an element with a ref using this hook
* [useFullscreen](https://rooks.vercel.app/docs/hooks/useFullscreen) - Use full screen api for making beautiful and emersive experinces.
* [useMeasure](https://rooks.vercel.app/docs/hooks/useMeasure) - Measures both inner and outer dimensions of any DOM element in a performant way and updates when dimensions change
* [useIntersectionObserverRef](https://rooks.vercel.app/docs/hooks/useIntersectionObserverRef) - A hook to register an intersection observer listener.
* [useInViewRef](https://rooks.vercel.app/docs/hooks/useInViewRef) - Simple hook that monitors element enters or leave the viewport that's using Intersection Observer API.
* [useMediaMatch](https://rooks.vercel.app/docs/hooks/useMediaMatch) - Signal whether or not a media query is currently matched.
* [useMutationObserver](https://rooks.vercel.app/docs/hooks/useMutationObserver) - Mutation Observer hook for React.
* [useMutationObserverRef](https://rooks.vercel.app/docs/hooks/useMutationObserverRef) - A hook that tracks mutations of an element. It returns a callbackRef.
* [usePictureInPictureApi](https://rooks.vercel.app/docs/hooks/usePictureInPictureApi) - Hook for managing Picture-in-Picture video functionality
* [usePreferredColorScheme](https://rooks.vercel.app/docs/hooks/usePreferredColorScheme) - Color scheme preference detection (dark/light mode)
* [useVideo](https://rooks.vercel.app/docs/hooks/useVideo) - Video hook for react
๐ง Utilities & Refs - 7 hooks
* [useEventListenerRef](https://rooks.vercel.app/docs/hooks/useEventListenerRef) - A react hook to add an event listener to a ref
* [useForkRef](https://rooks.vercel.app/docs/hooks/useForkRef) - A hook that can combine two refs(mutable or callbackRefs) into a single callbackRef
* [useFreshCallback](https://rooks.vercel.app/docs/hooks/useFreshCallback) - Avoid stale closures and keep your callback fresh
* [useFreshRef](https://rooks.vercel.app/docs/hooks/useFreshRef) - Avoid stale state in callbacks with this hook. Auto updates values using a ref.
* [useFreshTick](https://rooks.vercel.app/docs/hooks/useFreshTick) - Like use-fresh-ref but specifically for functions
* [useMergeRefs](https://rooks.vercel.app/docs/hooks/useMergeRefs) - Merges any number of refs into a single ref
* [useRefElement](https://rooks.vercel.app/docs/hooks/useRefElement) - Helps bridge gap between callback ref and state
๐ฑ Window & Viewport - 2 hooks
* [useWindowScrollPosition](https://rooks.vercel.app/docs/hooks/useWindowScrollPosition) - A React hook to get the scroll position of the window
* [useWindowSize](https://rooks.vercel.app/docs/hooks/useWindowSize) - Window size hook for React.
๐งช Experimental Hooks - 6 hooks
* [useSuspenseNavigatorBattery](https://rooks.vercel.app/docs/hooks/useSuspenseNavigatorBattery) - Suspense-enabled hook for getting battery status information from Navigator Battery API
* [useSuspenseFavicon](https://rooks.vercel.app/docs/hooks/useSuspenseFavicon) - Suspense-enabled hook for reading and updating the current favicon with same-origin and external URL support
* [useSuspenseNavigatorUserAgentData](https://rooks.vercel.app/docs/hooks/useSuspenseNavigatorUserAgentData) - Suspense-enabled hook for getting high entropy values from Navigator User Agent Data API
* [useSuspenseLocalStorageState](https://rooks.vercel.app/docs/hooks/useSuspenseLocalStorageState) - Suspense-enabled hook for localStorage state management with cross-tab synchronization
* [useSuspenseSessionStorageState](https://rooks.vercel.app/docs/hooks/useSuspenseSessionStorageState) - Suspense-enabled hook for sessionStorage state management with proper serialization
* [useSuspenseIndexedDBState](https://rooks.vercel.app/docs/hooks/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 125 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!
);
}
```
## Standalone Package
Package containing all the hooks is over here. - [Docs](https://github.com/imbhargav5/rooks/tree/master/packages/rooks) and [Npm Install](https://npmjs.com/package/rooks)
## License
MIT
## Contributors โจ
[](#contributors-)
Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):
View all 63 contributors
