A collection of reusable react hooks that you can copy and paste into your apps.
1. useAsyncStatus
Track the status of an asynchronous operation with useAsyncStatus.
2. useAutoScroll
Use the useAutoScroll hook to automatically scroll an element into view when it is focused, with optional parameters for behavior and block alignment.
3. useAutosizeTextarea
Automatically resize a textarea to fit its content with useAutosizeTextarea.
4. useBattery
Track the battery status of a user's device with useBattery.
5. useBluetooth
Connect to Bluetooth devices and manage their state with useBluetooth.
6. useBoolean
Manage a boolean state with the useBoolean hook, providing methods to set it to true, false, or toggle between them.
7. useCallbackRef
8. useClickAway
Detect clicks outside of specific component with useClickAway.
9. useClock
Display the current time and update it every second.
10. useContinuousRetry
Automates retries of a callback function until it succeeds with useContinuousRetry.
11. useControlledState
Manage a controlled state with the useControlledState hook, providing methods to set it to true, false, or toggle between them.
12. useCookieStorage
Store, retrieve, and synchronize data from the browser's Cookie Store API with useCookieStorage.
13. useCopyToClipboard
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.
14. useCountdown
Create countdown timers using useCountdown.
15. useCounter
Manage a numeric state with useCounter, offering functions to increment, decrement, reset, and set a custom value.
16. useDebounceCallback
Delay function execution with useDebounceCallback, providing options for canceling, flushing, and checking if a call is pending.
17. useDefault
Manage state with default values using useDefault.
18. useDocumentTitle
Dynamically update the document title. Pass a string, and the document title updates whenever the value changes.
19. useDraggable
A hook to manage draggable elements with useDraggable.
20. useDropzone
Drag and drop files into a dropzone with useDropzone, providing options to customize the dropzone.
21. useEncryption
Encrypt and decrypt data with the useEncryption hook, providing methods to encrypt and decrypt strings using AES encryption.
22. useEventListener
23. useFavicon
Dynamically update the favicon with useFavicon.
24. useFetch
Fetch data with accurate states, caching, and no stale responses using useFetch.
25. useFocusTrap
Trap focus within a specific element, useful for modals and accessibility.
26. useFullscreen
Manage fullscreen mode for a specific element or the entire document with useFullscreen.
27. useGeolocation
Access and monitor a user's geolocation (after they give permission) with useGeolocation.
28. useHistoryState
Add undo / redo functionality with useHistoryState.
29. useHover
Track whether an element is being hovered over with useHover.
30. useIdle
Detect user inactivity with useIdle.
31. useInputValue
A hook to manage input values with useInputValue.
32. useIntersectionObserver
A hook that provides a way to detect when an element enters or leaves the viewport using the Intersection Observer API.
33. useInterval
Execute a callback function at specified intervals with useInterval, supporting dynamic delays and cleanup on unmount.
34. useIntervalWhen
Create dynamic timers that can be started, paused, or resumed with useIntervalWhen.
35. useInView
Detect when an element is in the viewport with useInView, providing options for threshold and root margin.
36. useIsClient
Determine whether the code is running on the client-side or server-side with useIsClient.
37. useIsFirstRender
Track when a component is rendered for the first time with useIsFirstRender.
38. useIsMobile
Determine if the current device is a mobile device with the useIsMobile hook.
39. useIsomorphicLayoutEffect
Custom hook that uses either useLayoutEffect or useEffect based on the environment (client-side or server-side).
40. useKeyedArray
Manage an array of objects with unique keys using the useKeyedArray hook.
41. useKeyPress
Detect and perform actions on key press events with useKeyPress.
42. useList
Manage and manipulate lists with useList.
43. useLocalStorage
Store, retrieve, and synchronize data from the browser's localStorage API with useLocalStorage.
44. useLocation
A hook that allows you to access and manage the current location in your application
45. useLockBodyScroll
Disable body scrolling with the useLockBodyScroll hook. Useful for modals and other components that require a fixed body.
46. useLogger
Debug lifecycle events with useLogger.
47. useLongPress
Enable precise control of long-press interactions for both touch and mouse events with useLongPress.
48. useMap
Synchronize and update state based on the Map data structure with useMap.
49. useMeasure
Measure the dimensions of an element with useMeasure, providing options to track changes and observe the element.
50. useMeasureAny
Measure the dimensions of any element with useMeasureAny, providing options to track changes and observe the element.
51. useMediaQuery
Subscribe and respond to media query changes with useMediaQuery.
52. useMemory
Monitor the memory usage of a web page with useMemory, providing information about the JavaScript heap size.
53. useMergeRefs
Merge multiple refs into a single ref callback.
54. useMounted
Determine if a component is mounted with the useMounted hook.
55. useMousePosition
56. useMultiStepForm
Manage multi-step forms with the useMultiStepForm hook.
57. useMutationObserver
Observe mutations on a DOM element with the useMutationObserver hook.
58. useObjectState
Manage complex state objects with useObjectState.
59. useOnlineStatus
Detect when the user is online or offline with useOnlineStatus, providing a boolean value.
60. useOrientation
Manage and respond to changes in device orientation with useOrientation.
61. usePageLeave
Track when a user navigates away from a webpage with usePageLeave.
62. usePinchZoom
Enable pinch-to-zoom functionality on touch devices with usePinchZoom, providing options for min and max scale.
63. usePortal
Create and manage portals for rendering content outside the component hierarchy.
64. usePreventZoom
Prevent zooming on touch devices with usePreventZoom, providing options for scroll, keyboard, and pinch prevention.
65. usePrevious
Track the previous value of a variable with usePrevious.
66. useQueryState
Manage query parameters in the URL with the useQueryState hook, providing methods to get, set, and remove query parameters.
67. useQueue
Add, remove, and clear element from a queue data structure with useQueue.
68. useRandomInterval
Execute a callback function at a random interval with useRandomInterval.
69. useRenderCount
Identify unnecessary re-renders and monitor update frequency with useRenderCount.
70. useRenderDebugger
Logs prop/state changes between renders to help debug unnecessary re-renders.
71. useRerender
Force a component to rerender with useRerender, providing a method to trigger the rerender.
72. useScramble
Scramble text with the useScramble hook, providing methods to scramble, unscramble, and toggle between them.
73. useScript
Load and manage external JavaScript scripts with useScript.
74. useSessionStorage
Store, retrieve, and synchronize data from the browser’s sessionStorage API with useSessionStorage.
75. useSet
Synchronize and update state based on the Set data structure with useSet.
76. useSocket
Manage Socket connections, handling messages, errors, and connection states.
77. useSpeakup
Use the useSpeakup hook to convert text to speech, with options to control pitch, rate, volume, and voice selection.
78. useStep
A hook to manage step values with useStep.
79. useStopwatch
Create a stopwatch with useStopwatch, providing options to pause, play, reset, and toggle the stopwatch.
80. useSwipe
Detect swipe gestures on touch devices with useSwipe, providing options for direction and threshold.
81. useThrottle
Throttle computationally expensive operations with useThrottle.
82. useTimeAgo
Format a date into a human-readable 'time ago' format.
83. useTimeout
Run a callback function after a specified delay with useTimeout.
84. useToggle
Easily manage a boolean state with useToggle.
85. useUncontrolledState
Manage an uncontrolled state with the useUncontrolledState hook, providing methods to set it to true, false, or toggle between them.
86. useUnmount
Run a function when a component unmounts, ensuring cleanups or final actions are handled effectively.
87. useVibration
Use the useVibration hook to control the vibration of a device, with options for duration and pattern.
88. useVisibilityChange
Track document visibility and respond to changes with useVisibilityChange.
89. useWindowScroll
Track and manipulate the scroll position of a web page with useWindowScroll.
90. useWindowSize
Track the dimensions of the browser window with useWindowSize.
