## Install
```bash
pnpm add rooks
```
Rooks supports React and React DOM 18 or 19. The package is ESM-only.
## Quick start
```tsx
import { useCounter } from "rooks";
export function Counter() {
const { value, increment, decrement, reset } = useCounter(0);
return (
Count: {value}
);
}
```
Continue with the [three-step tutorial](https://rooks.vercel.app/docs/getting-started), or browse the [hook index](https://rooks.vercel.app/docs/hooks).
## Entrypoints
Rooks separates stable hooks, experimental hooks, and Temporal hooks so applications only opt into the compatibility and dependency surface they need.
| Import path | Use it for | Stability |
| -------------------- | ------------------------------------------------------------- | ---------------------------------------------------------------- |
| `rooks` | Stable hooks and explicitly exported utility types | Stable |
| `rooks/experimental` | Hooks whose API or behavior may change between minor releases | Experimental |
| `rooks/temporal` | Hooks built on the JavaScript Temporal API | Stable, optional polyfill required where Temporal is unavailable |
### Stable hooks
```tsx
import { useToggle } from "rooks";
```
Only types exported by an entrypoint are importable. Option and result shapes shown inline in a hook page are not necessarily public named exports.
### Experimental hooks
```tsx
import { useWebSocket } from "rooks/experimental";
```
Experimental hooks are isolated from the main entrypoint and can change in a minor release. Read the [experimental hooks guide](https://rooks.vercel.app/docs/guides/experimental-hooks) before using them in production.
### Temporal hooks
Install the optional polyfill when your supported runtimes do not provide `Temporal`:
```bash
pnpm add @js-temporal/polyfill
```
```tsx
import { useTemporalNow } from "rooks/temporal";
export function Clock() {
const now = useTemporalNow({ precision: "second" });
return ;
}
```
Temporal hooks require BigInt support and have specific SSR and time-zone considerations. See the [Temporal hooks guide](https://rooks.vercel.app/docs/guides/temporal-hooks).
## Server rendering and browser APIs
Hooks that read browser globals handle server rendering in hook-specific ways. Components still need a client boundary in frameworks where hooks cannot run in server components, and permission-gated APIs need a fallback for unsupported or denied states.
Read [SSR and browser APIs](https://rooks.vercel.app/docs/guides/ssr-and-browser-apis) before using browser-only hooks in a server-rendered application.
## Hook catalog
The following counts and tables are generated from the package export barrels and the canonical MDX pages. Run `pnpm docs:generate` after adding or moving a public hook; CI verifies the zone with `pnpm docs:generate --check`.
**147 canonical hook implementations** are available across three entrypoints. Aliases are listed separately and do not inflate this count.
| Entrypoint | Canonical hooks |
| -------------------- | --------------: |
| `rooks` | 118 |
| `rooks/experimental` | 25 |
| `rooks/temporal` | 4 |
Animation & Timing (10)
| Hook | Description | Entrypoint |
| ---------------------------------------------------------------------------------------- | --------------------------------------------------------------------------- | ---------- |
| [`useAnimation`](https://rooks.vercel.app/docs/hooks/useAnimation) | Deprecated progress animation hook; use useEasing for new code. | `rooks` |
| [`useEasing`](https://rooks.vercel.app/docs/hooks/useEasing) | Creates a controllable eased animation progress value. | `rooks` |
| [`useIntervalWhen`](https://rooks.vercel.app/docs/hooks/useIntervalWhen) | Runs the latest callback on an interval while a condition is true. | `rooks` |
| [`useLockBodyScroll`](https://rooks.vercel.app/docs/hooks/useLockBodyScroll) | Sets document.body overflow to hidden while a condition is true. | `rooks` |
| [`usePrefersReducedMotion`](https://rooks.vercel.app/docs/hooks/usePrefersReducedMotion) | Tracks the user's prefers-reduced-motion media setting. | `rooks` |
| [`useRaf`](https://rooks.vercel.app/docs/hooks/useRaf) | Runs the latest callback every animation frame while active. | `rooks` |
| [`useResizeObserverRef`](https://rooks.vercel.app/docs/hooks/useResizeObserverRef) | Observes the size of the element attached to a callback ref. | `rooks` |
| [`useSpring`](https://rooks.vercel.app/docs/hooks/useSpring) | Animates a number toward a target with a basic damped spring simulation. | `rooks` |
| [`useTimeoutWhen`](https://rooks.vercel.app/docs/hooks/useTimeoutWhen) | Runs the latest callback once after a delay while a condition remains true. | `rooks` |
| [`useTween`](https://rooks.vercel.app/docs/hooks/useTween) | Animates an eased progress value from zero to one. | `rooks` |
Browser APIs (16)
| Hook | Description | Entrypoint |
| ------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------ | ---------- |
| [`useBroadcastChannel`](https://rooks.vercel.app/docs/hooks/useBroadcastChannel) | Enables cross-tab/window communication via the BroadcastChannel API. | `rooks` |
| [`useClipboard`](https://rooks.vercel.app/docs/hooks/useClipboard) | Reads from and writes to the clipboard using the Clipboard API. | `rooks` |
| [`useFetch`](https://rooks.vercel.app/docs/hooks/useFetch) | Hook for fetching data from URLs with loading states, error handling, and automatic JSON parsing | `rooks` |
| [`useGeolocation`](https://rooks.vercel.app/docs/hooks/useGeolocation) | Tracks the user's geographic location using the Geolocation API. | `rooks` |
| [`useIdleDetectionApi`](https://rooks.vercel.app/docs/hooks/useIdleDetectionApi) | Detects when the user is idle using the IdleDetection API. | `rooks` |
| [`useMediaRecorder`](https://rooks.vercel.app/docs/hooks/useMediaRecorder) | Records audio/video streams using the MediaRecorder API. | `rooks` |
| [`useNavigatorLanguage`](https://rooks.vercel.app/docs/hooks/useNavigatorLanguage) | Returns the user's preferred language from the Navigator API. | `rooks` |
| [`useNetworkInformation`](https://rooks.vercel.app/docs/hooks/useNetworkInformation) | Exposes network connectivity and speed information from the Network Information API. | `rooks` |
| [`useNotification`](https://rooks.vercel.app/docs/hooks/useNotification) | Requests permission and sends desktop notifications via the Notifications API. | `rooks` |
| [`useOnline`](https://rooks.vercel.app/docs/hooks/useOnline) | Tracks the browser's navigator.onLine connectivity hint. | `rooks` |
| [`useOrientation`](https://rooks.vercel.app/docs/hooks/useOrientation) | Returns the current screen orientation and listens for orientation changes. | `rooks` |
| [`useScreenDetailsApi`](https://rooks.vercel.app/docs/hooks/useScreenDetailsApi) | Provides details about the user's screens using the Screen Details API. | `rooks` |
| [`useShare`](https://rooks.vercel.app/docs/hooks/useShare) | Triggers the native Web Share dialog to share content from the browser. | `rooks` |
| [`useSpeech`](https://rooks.vercel.app/docs/hooks/useSpeech) | Converts text to speech using the Web Speech API. | `rooks` |
| [`useVibrate`](https://rooks.vercel.app/docs/hooks/useVibrate) | Triggers device vibration patterns using the Vibration API. | `rooks` |
| [`useWebLocksApi`](https://rooks.vercel.app/docs/hooks/useWebLocksApi) | Coordinates asynchronous resource access using the Web Locks API. | `rooks` |
Development & Debugging (2)
| Hook | Description | Entrypoint |
| ------------------------------------------------------------------------------ | --------------------------------------------------------------------- | ---------- |
| [`useRenderCount`](https://rooks.vercel.app/docs/hooks/useRenderCount) | Counts how many times the current hook instance has rendered. | `rooks` |
| [`useWhyDidYouUpdate`](https://rooks.vercel.app/docs/hooks/useWhyDidYouUpdate) | Logs tracked values whose identity changed between committed renders. | `rooks` |
Event Handling (17)
| Hook | Description | Entrypoint |
| ---------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------ | ---------- |
| [`useDocumentEventListener`](https://rooks.vercel.app/docs/hooks/useDocumentEventListener) | Attaches a document event listener and removes it when the component unmounts. | `rooks` |
| [`useDocumentVisibilityState`](https://rooks.vercel.app/docs/hooks/useDocumentVisibilityState) | Returns the document visibility state and updates when it changes. | `rooks` |
| [`useFocus`](https://rooks.vercel.app/docs/hooks/useFocus) | Provides focus and blur props for an element's own focus boundary. | `rooks` |
| [`useFocusWithin`](https://rooks.vercel.app/docs/hooks/useFocusWithin) | Provides focus props that track entry to and exit from an element subtree. | `rooks` |
| [`useIsDroppingFiles`](https://rooks.vercel.app/docs/hooks/useIsDroppingFiles) | Reports whether files are being dragged over an element or the window. | `rooks` |
| [`useOnClickRef`](https://rooks.vercel.app/docs/hooks/useOnClickRef) | Returns a ref that handles native click and touch-end events. | `rooks` |
| [`useOnHoverRef`](https://rooks.vercel.app/docs/hooks/useOnHoverRef) | Returns a ref that handles native mouse-enter and mouse-leave events. | `rooks` |
| [`useOnLongHover`](https://rooks.vercel.app/docs/hooks/useOnLongHover) | Calls a callback after an element remains hovered for a duration. | `rooks` |
| [`useOnLongPress`](https://rooks.vercel.app/docs/hooks/useOnLongPress) | Calls a callback after an element remains pressed for a duration. | `rooks` |
| [`useOnStartTyping`](https://rooks.vercel.app/docs/hooks/useOnStartTyping) | Calls a callback for allowed typing keys outside editable elements. | `rooks` |
| [`useOnWindowResize`](https://rooks.vercel.app/docs/hooks/useOnWindowResize) | Calls a callback for passive window resize events. | `rooks` |
| [`useOnWindowScroll`](https://rooks.vercel.app/docs/hooks/useOnWindowScroll) | Calls a callback for passive window scroll events. | `rooks` |
| [`useOutsideClick`](https://rooks.vercel.app/docs/hooks/useOutsideClick) | Calls a handler for click or touch-start events outside an object ref. | `rooks` |
| [`useOutsideClickRef`](https://rooks.vercel.app/docs/hooks/useOutsideClickRef) | Returns a ref and calls a handler for click or touch-start events outside it. | `rooks` |
| [`usePageLeave`](https://rooks.vercel.app/docs/hooks/usePageLeave) | Calls a callback for unload, page-hide, and hidden-document signals. | `rooks` |
| [`useTextSelection`](https://rooks.vercel.app/docs/hooks/useTextSelection) | Returns the current text selection for the document or a target element. | `rooks` |
| [`useWindowEventListener`](https://rooks.vercel.app/docs/hooks/useWindowEventListener) | Attaches a window event listener and removes it when the component unmounts. | `rooks` |
Experimental Hooks (25)
| Hook | Description | Entrypoint |
| ------------------------------------------------------------------------------------------------------------ | ---------------------------------------------------------------------------------------------- | -------------------- |
| [`useAsyncDisposable`](https://rooks.vercel.app/docs/hooks/useAsyncDisposable) | Manages async disposable resources using the TC39 Explicit Resource Management proposal. | `rooks/experimental` |
| [`useBeforeUnload`](https://rooks.vercel.app/docs/hooks/useBeforeUnload) | Prompt before the page unloads when a guard passes. | `rooks/experimental` |
| [`useBrowserCookieState`](https://rooks.vercel.app/docs/hooks/useBrowserCookieState) | Persist React state in browser cookies with same-document synchronization. | `rooks/experimental` |
| [`useDisposable`](https://rooks.vercel.app/docs/hooks/useDisposable) | Manages synchronous disposable resources using the TC39 Explicit Resource Management proposal. | `rooks/experimental` |
| [`useEventListener`](https://rooks.vercel.app/docs/hooks/useEventListener) | Strongly typed event-listener primitive for browser EventTargets. | `rooks/experimental` |
| [`useIsClient`](https://rooks.vercel.app/docs/hooks/useIsClient) | Tell whether the component has mounted on the client. | `rooks/experimental` |
| [`useKeyPress`](https://rooks.vercel.app/docs/hooks/useKeyPress) | Track whether one or more keyboard keys are currently pressed. | `rooks/experimental` |
| [`useLocationHash`](https://rooks.vercel.app/docs/hooks/useLocationHash) | Read the current location hash, including the leading #. | `rooks/experimental` |
| [`useLocationSearchParam`](https://rooks.vercel.app/docs/hooks/useLocationSearchParam) | Read the first value for a specific search parameter. | `rooks/experimental` |
| [`useLocationSnapshot`](https://rooks.vercel.app/docs/hooks/useLocationSnapshot) | Read the current browser location as a stable snapshot. | `rooks/experimental` |
| [`useMediaDevices`](https://rooks.vercel.app/docs/hooks/useMediaDevices) | Enumerate and refresh available media input and output devices. | `rooks/experimental` |
| [`usePermission`](https://rooks.vercel.app/docs/hooks/usePermission) | Query and optionally watch browser permission state. | `rooks/experimental` |
| [`useRequest`](https://rooks.vercel.app/docs/hooks/useRequest) | Generic promise-request lifecycle hook with retries, polling, and mutation. | `rooks/experimental` |
| [`useResponsive`](https://rooks.vercel.app/docs/hooks/useResponsive) | Track a named set of media queries and compute the current breakpoint. | `rooks/experimental` |
| [`useScript`](https://rooks.vercel.app/docs/hooks/useScript) | Load and share external script state across multiple consumers. | `rooks/experimental` |
| [`useScroll`](https://rooks.vercel.app/docs/hooks/useScroll) | Track an element's scroll offsets and scrollable bounds. | `rooks/experimental` |
| [`useSize`](https://rooks.vercel.app/docs/hooks/useSize) | Measure an element with ResizeObserver using a callback ref. | `rooks/experimental` |
| [`useSuspenseFavicon`](https://rooks.vercel.app/docs/hooks/useSuspenseFavicon) | Loads a favicon and suspends the component until the resource is ready. | `rooks/experimental` |
| [`useSuspenseIndexedDBState`](https://rooks.vercel.app/docs/hooks/useSuspenseIndexedDBState) | Reads and writes IndexedDB state with Suspense support. | `rooks/experimental` |
| [`useSuspenseLocalStorageState`](https://rooks.vercel.app/docs/hooks/useSuspenseLocalStorageState) | Reads and writes localStorage state with Suspense support. | `rooks/experimental` |
| [`useSuspenseNavigatorBattery`](https://rooks.vercel.app/docs/hooks/useSuspenseNavigatorBattery) | Reads battery status from the Battery API with Suspense support. | `rooks/experimental` |
| [`useSuspenseNavigatorUserAgentData`](https://rooks.vercel.app/docs/hooks/useSuspenseNavigatorUserAgentData) | Reads User-Agent Client Hints with Suspense support. | `rooks/experimental` |
| [`useSuspenseSessionStorageState`](https://rooks.vercel.app/docs/hooks/useSuspenseSessionStorageState) | Reads and writes sessionStorage state with Suspense support. | `rooks/experimental` |
| [`useVirtualList`](https://rooks.vercel.app/docs/hooks/useVirtualList) | Render a fixed-size virtual list with ready-to-use item styles. | `rooks/experimental` |
| [`useWebSocket`](https://rooks.vercel.app/docs/hooks/useWebSocket) | Manage a WebSocket connection with parsing, sending, and reconnection helpers. | `rooks/experimental` |
Form & File Handling (3)
| Hook | Description | Entrypoint |
| ------------------------------------------------------------------------------------ | ----------------------------------------------------------------------------------- | ---------- |
| [`useCheckboxInputState`](https://rooks.vercel.app/docs/hooks/useCheckboxInputState) | Returns controlled checkbox state, handlers, and input props. | `rooks` |
| [`useFileDropRef`](https://rooks.vercel.app/docs/hooks/useFileDropRef) | Returns a ref that validates dropped files and reports accepted and rejected files. | `rooks` |
| [`useFormState`](https://rooks.vercel.app/docs/hooks/useFormState) | Manages named form values, validation, touched state, and submission. | `rooks` |
Keyboard & Input (5)
| Hook | Description | Entrypoint |
| ---------------------------------------------------------------------- | --------------------------------------------------------------------------- | ---------- |
| [`useInput`](https://rooks.vercel.app/docs/hooks/useInput) | Returns controlled input value and change props with optional validation. | `rooks` |
| [`useKey`](https://rooks.vercel.app/docs/hooks/useKey) | Calls a callback when any configured keyboard identifier matches an event. | `rooks` |
| [`useKeyBindings`](https://rooks.vercel.app/docs/hooks/useKeyBindings) | Maps independent keyboard identifiers to their callbacks. | `rooks` |
| [`useKeyRef`](https://rooks.vercel.app/docs/hooks/useKeyRef) | Returns a callback ref that handles matching keyboard events on an element. | `rooks` |
| [`useKeys`](https://rooks.vercel.app/docs/hooks/useKeys) | Calls a callback when every key in a configured combination is pressed. | `rooks` |
Lifecycle & Effects (11)
| Hook | Description | Entrypoint |
| ---------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------- | ---------- |
| [`useAsyncEffect`](https://rooks.vercel.app/docs/hooks/useAsyncEffect) | Runs asynchronous effect work with a current-generation guard and optional cleanup. | `rooks` |
| [`useDebouncedAsyncEffect`](https://rooks.vercel.app/docs/hooks/useDebouncedAsyncEffect) | Starts only the latest asynchronous effect after a debounce window. | `rooks` |
| [`useDebouncedEffect`](https://rooks.vercel.app/docs/hooks/useDebouncedEffect) | Delays an effect until its dependencies stop changing. | `rooks` |
| [`useDeepCompareEffect`](https://rooks.vercel.app/docs/hooks/useDeepCompareEffect) | Runs an effect when a dependency array changes by deep equality. | `rooks` |
| [`useDidMount`](https://rooks.vercel.app/docs/hooks/useDidMount) | Runs a callback from an effect when a component mounts. | `rooks` |
| [`useDidUpdate`](https://rooks.vercel.app/docs/hooks/useDidUpdate) | Runs a callback after updates while skipping the initial mount. | `rooks` |
| [`useDocumentTitle`](https://rooks.vercel.app/docs/hooks/useDocumentTitle) | Updates document.title and can restore its original value during cleanup. | `rooks` |
| [`useEffectOnceWhen`](https://rooks.vercel.app/docs/hooks/useEffectOnceWhen) | Runs the latest callback once when a condition first becomes true. | `rooks` |
| [`useIsomorphicEffect`](https://rooks.vercel.app/docs/hooks/useIsomorphicEffect) | Uses a layout effect in the browser and a passive effect during server rendering. | `rooks` |
| [`useLifecycleLogger`](https://rooks.vercel.app/docs/hooks/useLifecycleLogger) | Logs a component's mount, update, and unmount lifecycle to the console. | `rooks` |
| [`useWillUnmount`](https://rooks.vercel.app/docs/hooks/useWillUnmount) | Runs the initial callback as an effect cleanup when a component unmounts. | `rooks` |
Mouse & Touch (3)
| Hook | Description | Entrypoint |
| ------------------------------------------------------------------------------ | ---------------------------------------------------------------------------- | ---------- |
| [`useMouse`](https://rooks.vercel.app/docs/hooks/useMouse) | Returns document-level mouse coordinates from the latest mousemove event. | `rooks` |
| [`useMouseMoveDelta`](https://rooks.vercel.app/docs/hooks/useMouseMoveDelta) | Returns movement and velocity between consecutive document mousemove events. | `rooks` |
| [`useMouseWheelDelta`](https://rooks.vercel.app/docs/hooks/useMouseWheelDelta) | Returns vertical wheel delta and velocity from document wheel events. | `rooks` |
Performance & Optimization (5)
| Hook | Description | Entrypoint |
| ---------------------------------------------------------------------------- | ------------------------------------------------------------------------------- | ---------- |
| [`useDebounce`](https://rooks.vercel.app/docs/hooks/useDebounce) | Returns a stable Lodash-style debounced wrapper around the latest callback. | `rooks` |
| [`useDebouncedValue`](https://rooks.vercel.app/docs/hooks/useDebouncedValue) | Returns a value that follows its input after a delay, plus an immediate setter. | `rooks` |
| [`useDebounceFn`](https://rooks.vercel.app/docs/hooks/useDebounceFn) | Debounces a callback and reports whether its timeout window is active. | `rooks` |
| [`useThrottle`](https://rooks.vercel.app/docs/hooks/useThrottle) | Executes a callback immediately at most once per timeout window. | `rooks` |
| [`useWebWorker`](https://rooks.vercel.app/docs/hooks/useWebWorker) | Creates and manages a classic Web Worker with message, status, and error state. | `rooks` |
State Management (19)
| Hook | Description | Entrypoint |
| -------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------- | ---------- |
| [`useArrayState`](https://rooks.vercel.app/docs/hooks/useArrayState) | Manages an array state with helper methods for push, pop, splice, sort, and more. | `rooks` |
| [`useCountdown`](https://rooks.vercel.app/docs/hooks/useCountdown) | Counts the intervals remaining until a target Date and reports progress or completion. | `rooks` |
| [`useCounter`](https://rooks.vercel.app/docs/hooks/useCounter) | Manages a numeric counter with increment, decrement, and reset operations. | `rooks` |
| [`useGetIsMounted`](https://rooks.vercel.app/docs/hooks/useGetIsMounted) | Returns a function that reports whether the component is currently mounted. | `rooks` |
| [`useLocalstorageState`](https://rooks.vercel.app/docs/hooks/useLocalstorageState) | Persists React state in localStorage and synchronizes matching hook instances. | `rooks` |
| [`useMapState`](https://rooks.vercel.app/docs/hooks/useMapState) | Manages a record-like object as React state with keyed update and removal helpers. | `rooks` |
| [`useMultiSelectableList`](https://rooks.vercel.app/docs/hooks/useMultiSelectableList) | Manages multiple-selection list state with toggle and select-all helpers. | `rooks` |
| [`useNativeMapState`](https://rooks.vercel.app/docs/hooks/useNativeMapState) | Manages a native Map object in React state with reactive update helpers. | `rooks` |
| [`usePreviousDifferent`](https://rooks.vercel.app/docs/hooks/usePreviousDifferent) | Returns the most recent previous value that was different from the current one. | `rooks` |
| [`usePreviousImmediate`](https://rooks.vercel.app/docs/hooks/usePreviousImmediate) | Returns the previous value of a variable immediately after it changes. | `rooks` |
| [`usePromise`](https://rooks.vercel.app/docs/hooks/usePromise) | Tracks the status and result of a Promise (pending, resolved, or rejected). | `rooks` |
| [`useQueueState`](https://rooks.vercel.app/docs/hooks/useQueueState) | Manages queue (FIFO) state with enqueue, dequeue, and peek operations. | `rooks` |
| [`useRafState`](https://rooks.vercel.app/docs/hooks/useRafState) | Updates React state on each requestAnimationFrame tick. | `rooks` |
| [`useSafeSetState`](https://rooks.vercel.app/docs/hooks/useSafeSetState) | Calls setState only if the component is still mounted, preventing memory leaks. | `rooks` |
| [`useSelect`](https://rooks.vercel.app/docs/hooks/useSelect) | Manages a selection state from a list of options with helpers. | `rooks` |
| [`useSelectableList`](https://rooks.vercel.app/docs/hooks/useSelectableList) | Manages a single-selection list state with toggle and clear helpers. | `rooks` |
| [`useSessionstorageState`](https://rooks.vercel.app/docs/hooks/useSessionstorageState) | Persists React state in sessionStorage and synchronizes matching hook instances. | `rooks` |
| [`useSetState`](https://rooks.vercel.app/docs/hooks/useSetState) | Manages a Set data structure as React state with add, delete, and clear helpers. | `rooks` |
| [`useStackState`](https://rooks.vercel.app/docs/hooks/useStackState) | Manages stack (LIFO) state with push, pop, and peek operations. | `rooks` |
State History & Time Travel (4)
| Hook | Description | Entrypoint |
| ------------------------------------------------------------------------------ | -------------------------------------------------------------------------- | ---------- |
| [`useTimeTravelState`](https://rooks.vercel.app/docs/hooks/useTimeTravelState) | Manages state with undo, redo, and navigation across its complete history. | `rooks` |
| [`useToggle`](https://rooks.vercel.app/docs/hooks/useToggle) | Toggles a boolean or applies a custom reducer to another state type. | `rooks` |
| [`useUndoRedoState`](https://rooks.vercel.app/docs/hooks/useUndoRedoState) | Manages state with bounded undo and redo history. | `rooks` |
| [`useUndoState`](https://rooks.vercel.app/docs/hooks/useUndoState) | Manages state with a bounded, one-directional undo history. | `rooks` |
Temporal Hooks (4)
| Hook | Description | Entrypoint |
| ---------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------ | ---------------- |
| [`useTemporalAge`](https://rooks.vercel.app/docs/hooks/useTemporalAge) | Calculates calendar age from a date and updates at each local day boundary. | `rooks/temporal` |
| [`useTemporalCountdown`](https://rooks.vercel.app/docs/hooks/useTemporalCountdown) | Counts down to a Temporal instant and stops when the target is reached. | `rooks/temporal` |
| [`useTemporalElapsed`](https://rooks.vercel.app/docs/hooks/useTemporalElapsed) | Measures elapsed time from an instant and updates on aligned boundaries. | `rooks/temporal` |
| [`useTemporalNow`](https://rooks.vercel.app/docs/hooks/useTemporalNow) | Returns the current time as a Temporal value and updates on aligned time boundaries. | `rooks/temporal` |
UI & Layout (14)
| Hook | Description | Entrypoint |
| ---------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------- | ---------- |
| [`useAudio`](https://rooks.vercel.app/docs/hooks/useAudio) | Controls an audio element while exposing playback, loading, timing, volume, rate, loop, and error state. | `rooks` |
| [`useBoundingclientrect`](https://rooks.vercel.app/docs/hooks/useBoundingclientrect) | Reads an element's DOMRect after mount and whenever the observed DOM subtree mutates. | `rooks` |
| [`useBoundingclientrectRef`](https://rooks.vercel.app/docs/hooks/useBoundingclientrectRef) | Supplies a callback ref, its current DOMRect, and a manual measurement function. | `rooks` |
| [`useDimensionsRef`](https://rooks.vercel.app/docs/hooks/useDimensionsRef) | Measures an attached div after layout and optionally on window resize and scroll. | `rooks` |
| [`useFullscreen`](https://rooks.vercel.app/docs/hooks/useFullscreen) | Enters, exits, and tracks Fullscreen API state for the document or a target element. | `rooks` |
| [`useIntersectionObserverRef`](https://rooks.vercel.app/docs/hooks/useIntersectionObserverRef) | Returns a callback ref that forwards IntersectionObserver notifications to the latest callback. | `rooks` |
| [`useInViewRef`](https://rooks.vercel.app/docs/hooks/useInViewRef) | Returns a callback ref and whether its element currently intersects an observer root. | `rooks` |
| [`useMeasure`](https://rooks.vercel.app/docs/hooks/useMeasure) | Measures client, offset, and scroll dimensions with ResizeObserver and optional debouncing. | `rooks` |
| [`useMediaMatch`](https://rooks.vercel.app/docs/hooks/useMediaMatch) | Subscribes to a CSS media query with a deterministic server-rendered fallback. | `rooks` |
| [`useMutationObserver`](https://rooks.vercel.app/docs/hooks/useMutationObserver) | Observes mutations on the element in an existing object ref and cleans up automatically. | `rooks` |
| [`useMutationObserverRef`](https://rooks.vercel.app/docs/hooks/useMutationObserverRef) | Returns a callback ref that observes DOM mutations on its current element. | `rooks` |
| [`usePictureInPictureApi`](https://rooks.vercel.app/docs/hooks/usePictureInPictureApi) | Detects, enters, exits, and tracks standard Picture-in-Picture state for a video element. | `rooks` |
| [`usePreferredColorScheme`](https://rooks.vercel.app/docs/hooks/usePreferredColorScheme) | Tracks the user's light, dark, or no-preference color-scheme media setting. | `rooks` |
| [`useVideo`](https://rooks.vercel.app/docs/hooks/useVideo) | Supplies a video ref with playback, timing, mute, volume, seeking, and fullscreen controls. | `rooks` |
Utilities & Refs (7)
| Hook | Description | Entrypoint |
| -------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------- | ---------- |
| [`useEventListenerRef`](https://rooks.vercel.app/docs/hooks/useEventListenerRef) | Returns a callback ref that manages an event listener on its current HTML element. | `rooks` |
| [`useForkRef`](https://rooks.vercel.app/docs/hooks/useForkRef) | Sends one ref value to two mutable or callback refs. | `rooks` |
| [`useFreshCallback`](https://rooks.vercel.app/docs/hooks/useFreshCallback) | Returns a stable function that delegates to the latest callback after effects run. | `rooks` |
| [`useFreshRef`](https://rooks.vercel.app/docs/hooks/useFreshRef) | Keeps the latest committed value in a stable mutable ref. | `rooks` |
| [`useFreshTick`](https://rooks.vercel.app/docs/hooks/useFreshTick) | Returns a function that invokes the latest void callback after effects run. | `rooks` |
| [`useMergeRefs`](https://rooks.vercel.app/docs/hooks/useMergeRefs) | Sends one ref value to any number of mutable or callback refs. | `rooks` |
| [`useRefElement`](https://rooks.vercel.app/docs/hooks/useRefElement) | Exposes a callback ref together with the element currently attached to it. | `rooks` |
Window & Viewport (2)
| Hook | Description | Entrypoint |
| ---------------------------------------------------------------------------------------- | ------------------------------------------------------------------- | ---------- |
| [`useWindowScrollPosition`](https://rooks.vercel.app/docs/hooks/useWindowScrollPosition) | Returns reactive horizontal and vertical window scroll coordinates. | `rooks` |
| [`useWindowSize`](https://rooks.vercel.app/docs/hooks/useWindowSize) | Returns reactive inner and outer browser window dimensions. | `rooks` |
### Supported aliases
| Alias | Canonical hook | Entrypoint |
| ------------------- | ---------------------------------------------------------------------- | ---------- |
| `useObjectState` | [`useMapState`](https://rooks.vercel.app/docs/hooks/useMapState) | `rooks` |
| `useOnLongHoverRef` | [`useOnLongHover`](https://rooks.vercel.app/docs/hooks/useOnLongHover) | `rooks` |
| `useOnLongPressRef` | [`useOnLongPress`](https://rooks.vercel.app/docs/hooks/useOnLongPress) | `rooks` |
## Documentation
- [Getting started](https://rooks.vercel.app/docs/getting-started)
- [Guides](https://rooks.vercel.app/docs/guides/ssr-and-browser-apis)
- [Hook reference](https://rooks.vercel.app/docs/hooks)
- [Entrypoints and compatibility](https://rooks.vercel.app/docs/reference/entrypoints-and-compatibility)
- [Design and stability](https://rooks.vercel.app/docs/explanation/design-and-stability)
Every hook page is hand-authored MDX under `apps/website/content/docs`. Import paths, aliases, status, signatures, and README catalog data are validated against the package barrels.
## Community
- Read [CONTRIBUTING.md](https://github.com/imbhargav5/rooks/blob/main/CONTRIBUTING.md) before proposing a change.
- Use [GitHub Discussions](https://github.com/imbhargav5/rooks/discussions) for usage questions.
- Follow [SUPPORT.md](https://github.com/imbhargav5/rooks/blob/main/SUPPORT.md) for bugs and feature proposals.
- Report vulnerabilities privately as described in [SECURITY.md](https://github.com/imbhargav5/rooks/blob/main/SECURITY.md).
- Maintainers should use the main-only [release runbook](https://github.com/imbhargav5/rooks/blob/main/MAINTENANCE.md).
- See the [changelog](https://github.com/imbhargav5/rooks/blob/main/packages/rooks/CHANGELOG.md) for release history.
## License
Rooks is available under the [MIT License](https://github.com/imbhargav5/rooks/blob/main/LICENSE).
## Contributors
[View the current contributor graph](https://github.com/imbhargav5/rooks/graphs/contributors).
Thanks to everyone who has contributed to Rooks. The historical acknowledgements below use the [All Contributors emoji key](https://allcontributors.org/en/reference/emoji-key/); the contributor graph above is the current record.
View historical acknowledgements
