Usage

Groups

Explore the catalog grouped by practical usage level.

Necessary

Core everyday primitives that cover the most common React tasks.

• useBoolean: Hook provides opportunity to manage boolean state
• useClickOutside: Hook to handle click events outside the specified target element(s)
• useDidUpdate: Hook that triggers the effect callback on updates
• useDisclosure: Hook that allows you to open and close a modal
• useEventListener: Hook that attaches an event listener to the specified target
• useMount: Hook that executes a callback when the component mounts
• useUnmount: Hook that defines the logic when unmounting a component

High

Frequently useful functions that fit naturally into many production features.

• cn: Combines class names from strings, arrays and objects into a single string
• createContext: Creates a typed context with additional utilities
• useConst: Hook that returns the constant value
• useDebounceCallback: Hook that creates a debounced callback
• useDebounceEffect: Hook that runs an effect after a delay when dependencies change
• useDebounceState: Hook that creates a debounced state
• useDebounceValue: Hook that creates a debounced value
• useEvent: Hook that creates an event and returns a stable reference of it
• useInterval: Hook that makes and interval and returns controlling functions
• useIsomorphicLayoutEffect: Hook conditionally selects either useLayoutEffect or useEffect based on the environment
• useLocalStorage: Hook that manages local storage value
• useMap: Hook that manages a map structure
• useMutation: Hook that defines the logic when mutate data
• useQuery: Hook that defines the logic when query data
• useStopwatch: Hook that creates a stopwatch functionality
• useStorage: Hook that manages storage value
• useToggle: Hook that create toggle
• useUrlSearchParam: Hook that provides reactive URLSearchParams for a single key
• useUrlSearchParams: Hook that provides reactive URLSearchParams

Medium

Situational building blocks for recurring patterns and product-specific workflows.

• createStore: Creates a store with state management capabilities
• useAsync: Hook that provides the state of an async callback
• useAsyncEffect: Hook that triggers the effect callback on updates
• useBatchedCallback: Hook that batches calls and forwards them to a callback
• useBreakpoints: Hook that manages breakpoints
• useBrowserLanguage: Hook that returns the current browser language
• useBrowserLocation: Hook that returns reactive browser location state with navigation controls
• useClipboard: Hook that manages a copy to clipboard
• useControllableState: Hook that manages both controlled and uncontrolled state patterns
• useCookie: Hook that manages cookie value
• useCookies: Hook that manages cookie values
• useCopy: Hook that manages copying text with status reset
• useCycleList: Hook that cycles through a list of items
• useDefault: Hook that returns the default value
• useDeviceList: Hook that returns the list of available media devices
• useDoubleClick: Hook that defines the logic when double clicking an element
• useDropZone: Hook that provides drop zone functionality
• useField: Hook to manage a form field
• useFocus: Hook that allows you to focus on a specific element
• useFocusTrap: Hook that traps focus within a given element
• useForm: Hook to manage a form
• useGeolocation: Hook that returns the current geolocation
• useHotkeys: Hook that listens for hotkeys
• useHover: Hook that defines the logic when hovering an element
• useInfiniteScroll: Hook that defines the logic for infinite scroll
• useIntersectionObserver: Hook that gives you intersection observer state
• useKeyboard: Hook that helps to listen for keyboard events
• useKeyPress: Hook that listens for key press events
• useLatest: Hook that returns the stable reference of the value
• useList: Hook that provides state and helper methods to manage a list of items
• useLockCallback: Hook that prevents a callback from being executed multiple times simultaneously
• useLockScroll: Hook that locks scroll on an element or document body
• useLongPress: Hook that defines the logic when long pressing an element
• useMask: Hook to apply an input mask
• useMediaQuery: Hook that manages a media query
• useMediaStream: Hook that provides reactive access to a mediaDevices.getUserMedia stream
• useMergedRef: Hook that merges multiple refs into a single ref
• useNotification: Hook that provides a reactive wrapper around the browser Notifications API
• useObject: Hook that provides state and helper methods to manage an object
• useOffsetPagination: Hook that defines the logic when pagination
• useOnline: Hook that manages if the user is online
• useOptimistic: Hook that allows get optimistic value before its update
• usePermission: Hook that gives you the state of permission
• usePreferredColorScheme: Hook that returns user preferred color scheme
• usePreferredContrast: Hook that returns the contrast preference
• usePreferredDark: Hook that returns if the user prefers dark mode
• usePreferredLanguages: that returns a browser preferred languages from navigator
• useProgress: Hook that creates a lightweight progress bar
• useQueue: Hook that manages a queue
• useRerender: Hook that defines the logic to force rerender a component
• useSessionStorage: Hook that manages session storage value
• useSet: Hook that manages a set structure
• useShare: Hook that utilizes the share api
• useStateHistory: Hook that manages state with history functionality
• useStep: Hook that create stepper
• useTextareaAutosize: Hook that automatically adjusts textarea height based on content
• useTextDirection: Hook that can get and set the direction of the element
• useThrottleCallback: Hook that creates a throttled callback
• useThrottleEffect: Hook that runs an effect at most once per delay period when dependencies change
• useThrottleState: Hook that creates a throttled state
• useThrottleValue: Hook that creates a throttled value
• useTime: Hook that gives you current time in different values
• useTimeout: Hook that executes a callback function after a specified delay
• useTimer: Hook that creates a timer functionality
• useValidatedState: Hook that manages a state value together with its validation result
• useVisibility: Hook that gives you visibility observer state
• useWebSocket: Hook that connects to a WebSocket server and handles incoming and outgoing messages
• useWizard: Hook that manages a wizard

Low

Niche utilities for targeted browser APIs, edge cases, and specialized interactions.

• createEventEmitter: Creates a type-safe event emitter
• createReactiveContext: Creates a typed context selector with optimized updates for state selection
• makeDestructurable: Makes an object also iterable for array-style destructuring
• useActiveElement: Hook for tracking the active element
• useAudio: Hook that manages audio playback with sprite support
• useAutoScroll: Hook that automatically scrolls a list element to the bottom
• useBattery: Hook for getting information about battery status
• useBluetooth: Hook for getting information about bluetooth
• useBroadcastChannel: Hook that provides cross-tab/window communication
• useContextMenu: Hook that handles custom context menus on desktop and long press on touch devices
• useCounter: Hook that manages a counter
• useCssVar: Hook that returns the value of a css variable
• useDeviceMotion: Hook that work with device motion
• useDeviceOrientation: Hook that provides the current device orientation
• useDevicePixelRatio: Hook that returns the device's pixel ratio
• useDisplayMedia: Hook that provides screen sharing functionality
• useDocumentEvent: Hook attaches an event listener to the document object for the specified event
• useDocumentTitle: Hook that manages the document title and allows updating it
• useDocumentVisibility: Hook that provides the current visibility state of the document
• useEventSource: Hook that provides a reactive wrapper for event source
• useEyeDropper: Hook that gives you access to the eye dropper
• useFavicon: Hook that manages the favicon
• useFileDialog: Hook to handle file input
• useFileSystemAccess: Hook for reading and writing local files via the File System Access API
• useFps: Hook that measures frames per second
• useFul: Hook that can be so useful
• useFullscreen: Hook to handle fullscreen events
• useGamepad: Hook for getting information about gamepad
• useHash: Hook that manages the hash value
• useIdle: Hook that defines the logic when the user is idle
• useImage: Hook that load an image in the browser
• useIsFirstRender: Hook that returns true if the component is first render
• useKeysPressed: Hook that tracks all currently pressed keyboard keys and their codes
• useLastChanged: Hook for records the timestamp of the last change
• useLess: Hook that can be so useless
• useLogger: Hook for debugging lifecycle
• useMeasure: Hook to measure the size and position of an element
• useMediaControls: Hook that provides controls for HTML media elements (audio/video)
• useMemory: Hook that gives you current memory usage
• useMouse: Hook that manages a mouse position
• useMutationObserver: Hook that gives you mutation observer state
• useNetwork: Hook to track network status
• useObjectUrl: Hook that creates and revokes an object URL for a Blob or MediaSource
• useOnce: Hook that runs an effect only once. Please do not use it in production code!
• useOperatingSystem: Hook that returns the operating system of the current browser
• useOrientation: Hook that provides the current screen orientation
• useOtpCredential: Hook that creates an otp credential
• usePageLeave: Hook what calls given function when mouse leaves the page
• usePaint: Hook that allows you to draw in a specific area
• useParallax: Hook to help create parallax effect
• usePerformanceObserver: Hook that allows you to observe performance entries
• usePictureInPicture: Hook that provides Picture-in-Picture functionality for video elements
• usePointerLock: Hook that provides reactive pointer lock
• usePostMessage: Hook that allows you to receive messages from other origins
• usePreferredReducedMotion: Hook that returns the reduced motion preference
• usePrevious: Hook that returns the previous value
• useRaf: Hook that defines the logic for raf callback
• useRafState: Hook that returns the value and a function to set the value
• useRefState: Hook that returns the state reference of the value
• useRenderCount: Hook returns count component render times
• useRenderInfo: Hook for getting information about component rerender
• useResizeObserver: Hook that gives you resize observer state
• useScript: Hook that manages a script with onLoad, onError, and removeOnUnmount functionalities
• useScroll: Hook that allows you to control scroll a element
• useScrollIntoView: Hook that provides functionality to scroll an element into view
• useScrollTo: Hook for scrolling to a specific element
• useShallowEffect: Hook that executes an effect only when dependencies change shallowly or deeply
• useSize: Hook that observes and returns the width and height of element
• useSpeechRecognition: Hook that provides a streamlined interface for incorporating speech-to-text functionality
• useSpeechSynthesis: Hook that provides speech synthesis functionality
• useSticky: Hook that allows you to detect that your sticky component is stuck
• useSwipe: Hook that tracks swipe gestures for touch and pointer events
• useTextSelection: Hook that manages the text selection
• useVibrate: Hook that provides vibrate api
• useVirtualKeyboard: Hook that manages virtual keyboard state
• useWakeLock: Hook that provides a wake lock functionality
• useWindowEvent: Hook attaches an event listener to the window object for the specified event
• useWindowFocus: Hook that provides the current focus state of the window
• useWindowScroll: Hook that manages the window scroll position
• useWindowSize: Hook that manages a window size