logo

Explore All of the React Hooks

Dive into a collection of essential React hooks with clear examples, detailed descriptions, and interactive demos to help you learn and experiment easily.

State Management

useLocalStorage

State Management

Persist state in localStorage with automatic JSON serialization and synchronization

useSessionStorage

State Management

Persist state in localStorage with automatic JSON serialization and synchronization

useToggle

State Management

Manage boolean state with convenient helper functions for common operations

useCounter

State Management

Counter state with increment, decrement, reset, and set operations

usePrevious

State Management

Counter state with increment, decrement, reset, and set operations

useUpdate

State Management

Counter state with increment, decrement, reset, and set operations

Performance

useDebounce

Performance

Delay updating a value until a specified time has passed since the last change. Useful for optimizing performance in search inputs, filters, or resize events.

useThrottle

Performance

Limit how frequently a value updates by enforcing a fixed time interval. Useful for optimizing performance in scroll, resize, or rapid input events.

Data Fetching

useFetch

Data Fetching

A powerful data-fetching hook that manages loading, error, and response states automatically.

useAsync

Data Fetching

Manage the lifecycle of asynchronous operations (loading, success, error) with built-in state management.

DOM & Events

useHover

DOM & Events

Detect whether an element is being hovered by the mouse and track its hover state.

useClickOutside

DOM & Events

Detect clicks or touches outside a referenced element and trigger a handler function.

useWindowSize

DOM & Events

Track the current width and height of the browser window. Automatically updates when the window is resized.

useKeyPress

DOM & Events

Track whether a specific key is currently being pressed on the keyboard.

useLongPress

DOM & Events

Detect long press gestures on mouse or touch devices and trigger a callback after a specified delay.

useScroll

DOM & Events

Track the scroll position (x, y) and scroll direction of an element or the window.

useDrop

DOM & Events

Handle drag-and-drop interactions on an element, including detecting when an item is dragged over and dropped.

useDropArea

DOM & Events

Handle file drag-and-drop interactions within a specific area. Provides real-time feedback when files are dragged over and captures the dropped file list.

useEvent

DOM & Events

Easily attach and clean up DOM or window event listeners in React. Automatically handles binding to elements, refs, or global targets with proper cleanup.

useLockBodyScroll

DOM & Events

Locks or unlocks scrolling on the body element.

useMouse

DOM & Events

Tracks the mouse cursor position relative to the window or a specific element. Returns the X and Y coordinates in real-time.

useMouseWheel

DOM & Events

Tracks mouse wheel events and returns the scroll deltas (deltaX, deltaY, deltaZ) in real-time.

useFullscreen

DOM & Events

Manage fullscreen mode for any HTML element. Provides functions to enter, exit, or toggle fullscreen, and tracks the fullscreen state.

Utilities

useCopyToClipboard

Utilities

Copy any text to the user’s clipboard and track the copy state for UI feedback (e.g., showing a “Copied!” message).

useInterval

Utilities

Run a callback function at a specified time interval, with full React lifecycle support and dynamic delay control.

useCookie

Utilities

A React hook to easily get, set, and remove cookies with optional configuration for expiration, path, and security settings.

Browser & Device

useGeolocation

Browser & Device

Tracks the user’s current geolocation (latitude, longitude, accuracy) and provides any errors if the location cannot be retrieved.

useHash

Browser & Device

Read and update the current URL hash. Automatically tracks changes to the hash and provides a function to update it programmatically.

useIdle

Browser & Device

Detects when the user is idle based on mouse, keyboard, touch, and scroll events. Returns a boolean indicating whether the user is currently idle.

useIntersection

Browser & Device

Tracks whether an element is currently visible in the viewport using the Intersection Observer API.

useLocation

Browser & Device

Tracks the current browser location, including pathname, search query, and hash. Updates automatically when the URL changes.

useMedia

Browser & Device

Tracks whether a given CSS media query currently matches. Updates in real-time when the viewport changes.

useMediaDevices

Browser & Device

Fetches the list of available media devices (microphones, cameras, speakers) and updates automatically when devices change.

useNetworkState

Browser & Device

Tracks the browser network state in real-time. Returns whether the user is online and the timestamp since the last change.

usePageLeave

Browser & Device

Detects when the user attempts to leave the page (e.g., closing the tab or refreshing) and triggers a callback.

useSearchParam

Browser & Device

Gets and sets a specific URL search parameter in real-time. Automatically updates the state when the URL changes via browser navigation.

useVisibilityChange

Browser & Device

Tracks the visibility state of the document. Returns whether the page is currently visible or hidden, updating in real-time.

Media

useVideo

Media

Manages video playback with full control over play, pause, stop, volume, mute, and current time.

useAudio

Media

Manages audio playback with full control over play, pause, stop, volume, and current time.