Dive into a collection of essential React hooks with clear examples, detailed descriptions, and interactive demos to help you learn and experiment easily.
Persist state in localStorage with automatic JSON serialization and synchronization
Persist state in localStorage with automatic JSON serialization and synchronization
Manage boolean state with convenient helper functions for common operations
Counter state with increment, decrement, reset, and set operations
Counter state with increment, decrement, reset, and set operations
Counter state with increment, decrement, reset, and set operations
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.
Limit how frequently a value updates by enforcing a fixed time interval. Useful for optimizing performance in scroll, resize, or rapid input events.
A powerful data-fetching hook that manages loading, error, and response states automatically.
Manage the lifecycle of asynchronous operations (loading, success, error) with built-in state management.
Detect whether an element is being hovered by the mouse and track its hover state.
Detect clicks or touches outside a referenced element and trigger a handler function.
Track the current width and height of the browser window. Automatically updates when the window is resized.
Track whether a specific key is currently being pressed on the keyboard.
Detect long press gestures on mouse or touch devices and trigger a callback after a specified delay.
Track the scroll position (x, y) and scroll direction of an element or the window.
Handle drag-and-drop interactions on an element, including detecting when an item is dragged over and dropped.
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.
Easily attach and clean up DOM or window event listeners in React. Automatically handles binding to elements, refs, or global targets with proper cleanup.
Locks or unlocks scrolling on the body element.
Tracks the mouse cursor position relative to the window or a specific element. Returns the X and Y coordinates in real-time.
Tracks mouse wheel events and returns the scroll deltas (deltaX, deltaY, deltaZ) in real-time.
Manage fullscreen mode for any HTML element. Provides functions to enter, exit, or toggle fullscreen, and tracks the fullscreen state.
Copy any text to the user’s clipboard and track the copy state for UI feedback (e.g., showing a “Copied!” message).
Run a callback function at a specified time interval, with full React lifecycle support and dynamic delay control.
A React hook to easily get, set, and remove cookies with optional configuration for expiration, path, and security settings.
Tracks the user’s current geolocation (latitude, longitude, accuracy) and provides any errors if the location cannot be retrieved.
Read and update the current URL hash. Automatically tracks changes to the hash and provides a function to update it programmatically.
Detects when the user is idle based on mouse, keyboard, touch, and scroll events. Returns a boolean indicating whether the user is currently idle.
Tracks whether an element is currently visible in the viewport using the Intersection Observer API.
Tracks the current browser location, including pathname, search query, and hash. Updates automatically when the URL changes.
Tracks whether a given CSS media query currently matches. Updates in real-time when the viewport changes.
Fetches the list of available media devices (microphones, cameras, speakers) and updates automatically when devices change.
Tracks the browser network state in real-time. Returns whether the user is online and the timestamp since the last change.
Detects when the user attempts to leave the page (e.g., closing the tab or refreshing) and triggers a callback.
Gets and sets a specific URL search parameter in real-time. Automatically updates the state when the URL changes via browser navigation.
Tracks the visibility state of the document. Returns whether the page is currently visible or hidden, updating in real-time.
Manages video playback with full control over play, pause, stop, volume, mute, and current time.
Manages audio playback with full control over play, pause, stop, volume, and current time.