A collection of reusable react hooks that you can copy and paste into your apps.
Track the status of an asynchronous operation with useAsyncStatus.
Use the useAutoScroll hook to automatically scroll an element into view when it is focused, with optional parameters for behavior and block alignment.
Automatically resize a textarea to fit its content with useAutosizeTextarea.
Track the battery status of a user's device with useBattery.
Connect to Bluetooth devices and manage their state with useBluetooth.
Manage a boolean state with the useBoolean hook, providing methods to set it to true, false, or toggle between them.
Detect and respond to changes in viewport size with the useBreakpoint hook, allowing for responsive design adjustments.
Detect clicks outside of specific component with useClickAway.
Display the current time and update it every second.
Automates retries of a callback function until it succeeds with useContinuousRetry.
Manage a controlled state with the useControlledState hook, providing methods to set it to true, false, or toggle between them.
Store, retrieve, and synchronize data from the browser's Cookie Store API with useCookieStorage.
Use the useCopyToClipboard hook to copy text to the clipboard and track whether the copy action was successful, with an optional delay to reset the copied state.
Create countdown timers using useCountdown.
Manage a numeric state with useCounter, offering functions to increment, decrement, reset, and set a custom value.
Delay function execution with useDebounceCallback, providing options for canceling, flushing, and checking if a call is pending.
Manage state with default values using useDefault.
Detect the type of device (mobile, tablet, desktop) and its characteristics with the useDeviceDetect hook, providing a way to adapt UI and functionality based on the device type.
Dynamically update the document title. Pass a string, and the document title updates whenever the value changes.
Detect when the DOM is fully loaded and ready for manipulation with the useDomReady hook, providing a way to execute code after the DOM is ready.
A hook to manage draggable elements with useDraggable.
Drag and drop files into a dropzone with useDropzone, providing options to customize the dropzone.
Encrypt and decrypt data with the useEncryption hook, providing methods to encrypt and decrypt strings using AES encryption.
Check the environment (development, production, test) in which the application is running with the useEnvCheck hook, allowing for environment-specific logic.
Handle errors in React components gracefully with the useErrorBoundary hook, providing a way to catch and display errors without crashing the application.
Measure the execution time of a function with the useExecutionTime hook, providing methods to start, stop, and get the elapsed time.
Dynamically update the favicon with useFavicon.
Fetch data with accurate states, caching, and no stale responses using useFetch.
Trap focus within a specific element, useful for modals and accessibility.
Manage form state and validation with the useForm hook, providing methods to handle input changes, validation, and submission.
Manage fullscreen mode for a specific element or the entire document with useFullscreen.
Access and monitor a user's geolocation (after they give permission) with useGeolocation.
Add undo / redo functionality with useHistoryState.
Track whether an element is being hovered over with useHover.
Detect user inactivity with useIdle.
Implement infinite scrolling functionality with the useInfiniteScroll hook, allowing for dynamic loading of content as the user scrolls.
A hook to manage input values with useInputValue.
A hook that provides a way to detect when an element enters or leaves the viewport using the Intersection Observer API.
Execute a callback function at specified intervals with useInterval, supporting dynamic delays and cleanup on unmount.
Create dynamic timers that can be started, paused, or resumed with useIntervalWhen.
Detect when an element is in the viewport with useInView, providing options for threshold and root margin.
Determine whether the code is running on the client-side or server-side with useIsClient.
Track when a component is rendered for the first time with useIsFirstRender.
Determine if the current device is a mobile device with the useIsMobile hook.
Custom hook that uses either useLayoutEffect or useEffect based on the environment (client-side or server-side).
Manage an array of objects with unique keys using the useKeyedArray hook.
Detect and perform actions on key press events with useKeyPress.
Manage and manipulate lists with useList.
Store, retrieve, and synchronize data from the browser's localStorage API with useLocalStorage.
A hook that allows you to access and manage the current location in your application
Disable body scrolling with the useLockBodyScroll hook. Useful for modals and other components that require a fixed body.
Debug lifecycle events with useLogger.
Enable precise control of long-press interactions for both touch and mouse events with useLongPress.
Synchronize and update state based on the Map data structure with useMap.
Measure the dimensions of an element with useMeasure, providing options to track changes and observe the element.
Measure the dimensions of any element with useMeasureAny, providing options to track changes and observe the element.
Subscribe and respond to media query changes with useMediaQuery.
Memoize functions to prevent unnecessary re-computations with the useMemoizedFn hook, providing a way to optimize performance in React components.
Monitor the memory usage of a web page with useMemory, providing information about the JavaScript heap size.
A simple Memory game implemented as a React hook, allowing users to match pairs of cards.
Merge multiple refs into a single ref callback.
Determine if a component is mounted with the useMounted hook.
Manage multi-step forms with the useMultiStepForm hook.
Observe mutations on a DOM element with the useMutationObserver hook.
Monitor the network status (online/offline) and connection type (WiFi, cellular) with the useNetworkStatus hook, providing a way to adapt functionality based on network conditions.
A simple number guessing game implemented as a React hook, allowing users to guess a randomly generated number within a specified range.
Manage complex state objects with useObjectState.
Detect when the user is online or offline with useOnlineStatus, providing a boolean value.
Manage and respond to changes in device orientation with useOrientation.
Track when a user navigates away from a webpage with usePageLeave.
Measure the time it takes for a page to load with the usePageLoadTime hook, providing insights into performance and user experience.
Manage pagination state and logic with the usePagination hook, providing methods to navigate through pages and track current page state
Enable pinch-to-zoom functionality on touch devices with usePinchZoom, providing options for min and max scale.
Create and manage portals for rendering content outside the component hierarchy.
Prevent zooming on touch devices with usePreventZoom, providing options for scroll, keyboard, and pinch prevention.
Track the previous value of a variable with usePrevious.
Manage query parameters in the URL with the useQueryState hook, providing methods to get, set, and remove query parameters.
Add, remove, and clear element from a queue data structure with useQueue.
Execute a callback function at a random interval with useRandomInterval.
Identify unnecessary re-renders and monitor update frequency with useRenderCount.
Logs prop/state changes between renders to help debug unnecessary re-renders.
Force a component to rerender with useRerender, providing a method to trigger the rerender.
A simple Rock Paper Scissors game implemented as a React hook, allowing users to play against the computer.
Safely manage state updates in React components with the useSafeState hook, preventing memory leaks and ensuring state consistency.
Scramble text with the useScramble hook, providing methods to scramble, unscramble, and toggle between them.
Load and manage external JavaScript scripts with useScript.
Detect the direction of scrolling (up or down) with the useScrollDirection hook, allowing for dynamic UI adjustments based on scroll behavior.
Scroll the window or a specific element to the top with the useScrollToTop hook, providing options for smooth scrolling and custom behavior.
Store, retrieve, and synchronize data from the browser’s sessionStorage API with useSessionStorage.
Synchronize and update state based on the Set data structure with useSet.
A simple Snake game implemented as a React hook, allowing users to play the game with customizable settings.
Manage Socket connections, handling messages, errors, and connection states.
Use the useSpeakup hook to convert text to speech, with options to control pitch, rate, volume, and voice selection.
Validate state updates in React components with the useStateValidator hook, providing a way to ensure state changes meet specific criteria before being applied.
A hook to manage step values with useStep.
Create a stopwatch with useStopwatch, providing options to pause, play, reset, and toggle the stopwatch.
Detect swipe gestures on touch devices with useSwipe, providing options for direction and threshold.
Detect and manage text direction (LTR or RTL) in React components with the useTextDirection hook, providing a way to adapt UI based on language directionality.
Throttle computationally expensive operations with useThrottle.
A simple Tic Tac Toe game implemented as a React hook, allowing users to play the game with a friend or against the computer.
Format a date into a human-readable 'time ago' format.
Determine the current time of day (morning, afternoon, evening, night) with the useTimeOfDay hook, allowing for dynamic UI adjustments based on the time.
Run a callback function after a specified delay with useTimeout.
Easily manage a boolean state with useToggle.
Manage an uncontrolled state with the useUncontrolledState hook, providing methods to set it to true, false, or toggle between them.
Run a function when a component unmounts, ensuring cleanups or final actions are handled effectively.
Run effects only when the component updates, not on the initial render, with the useUpdateEffect hook, providing a way to execute code after updates without affecting the initial render.
Use the useVibration hook to control the vibration of a device, with options for duration and pattern.
Track document visibility and respond to changes with useVisibilityChange.
Track and manipulate the scroll position of a web page with useWindowScroll.
Track the dimensions of the browser window with useWindowSize.
Manage web workers in React components with the useWorker hook, providing a way to offload computationally expensive tasks to a separate thread.
