# reactuse > reactuse is a collection of production-ready React hooks and helpers. It is TypeScript-first, SSR compatible, tree-shakable, and designed for modern React applications. ## Overview - [Introduction](https://reactuse.org/docs/introduction): Core project overview and philosophy. - [Installation](https://reactuse.org/docs/installation): Install Reactuse into your project. - [CLI](https://reactuse.org/docs/cli): Useverse CLI for adding hooks into your codebase. - [Functions](https://reactuse.org/functions): Browse all hooks and helpers with API docs. - [Skills](https://reactuse.org/docs/skills): AI assistant skill guide for Reactuse. - [Reactuse Skill Registry](https://skills.sh/siberiacancode/agent-skills/reactuse): Published Reactuse skill for coding agents. ## Functions ### Helperss - [cn](https://reactuse.org/functions/helpers/cn): Combines class names from strings, arrays and objects into a single string - [createContext](https://reactuse.org/functions/helpers/createContext): Creates a typed context with additional utilities - [createEventEmitter](https://reactuse.org/functions/helpers/createEventEmitter): Creates a type-safe event emitter - [createReactiveContext](https://reactuse.org/functions/helpers/createReactiveContext): Creates a typed context selector with optimized updates for state selection - [createStore](https://reactuse.org/functions/helpers/createStore): Creates a store with state management capabilities - [makeDestructurable](https://reactuse.org/functions/helpers/makeDestructurable): Makes an object also iterable for array-style destructuring ### Asyncs - [useAsync](https://reactuse.org/functions/hooks/useAsync): Hook that provides the state of an async callback - [useLockCallback](https://reactuse.org/functions/hooks/useLockCallback): Hook that prevents a callback from being executed multiple times simultaneously - [useMutation](https://reactuse.org/functions/hooks/useMutation): Hook that defines the logic when mutate data - [useOptimistic](https://reactuse.org/functions/hooks/useOptimistic): Hook that allows get optimistic value before its update - [useQuery](https://reactuse.org/functions/hooks/useQuery): Hook that defines the logic when query data ### Browsers - [useAudio](https://reactuse.org/functions/hooks/useAudio): Hook that manages audio playback with sprite support - [useBattery](https://reactuse.org/functions/hooks/useBattery): Hook for getting information about battery status - [useBluetooth](https://reactuse.org/functions/hooks/useBluetooth): Hook for getting information about bluetooth - [useBreakpoints](https://reactuse.org/functions/hooks/useBreakpoints): Hook that manages breakpoints - [useBroadcastChannel](https://reactuse.org/functions/hooks/useBroadcastChannel): Hook that provides cross-tab/window communication - [useBrowserLocation](https://reactuse.org/functions/hooks/useBrowserLocation): Hook that returns reactive browser location state with navigation controls - [useClipboard](https://reactuse.org/functions/hooks/useClipboard): Hook that manages a copy to clipboard - [useCopy](https://reactuse.org/functions/hooks/useCopy): Hook that manages copying text with status reset - [useCssVar](https://reactuse.org/functions/hooks/useCssVar): Hook that returns the value of a css variable - [useDisplayMedia](https://reactuse.org/functions/hooks/useDisplayMedia): Hook that provides screen sharing functionality - [useDocumentEvent](https://reactuse.org/functions/hooks/useDocumentEvent): Hook attaches an event listener to the document object for the specified event - [useDocumentTitle](https://reactuse.org/functions/hooks/useDocumentTitle): Hook that manages the document title and allows updating it - [useDocumentVisibility](https://reactuse.org/functions/hooks/useDocumentVisibility): Hook that provides the current visibility state of the document - [useEventListener](https://reactuse.org/functions/hooks/useEventListener): Hook that attaches an event listener to the specified target - [useEventSource](https://reactuse.org/functions/hooks/useEventSource): Hook that provides a reactive wrapper for event source - [useEyeDropper](https://reactuse.org/functions/hooks/useEyeDropper): Hook that gives you access to the eye dropper - [useFavicon](https://reactuse.org/functions/hooks/useFavicon): Hook that manages the favicon - [useFileSystemAccess](https://reactuse.org/functions/hooks/useFileSystemAccess): Hook for reading and writing local files via the File System Access API - [useFps](https://reactuse.org/functions/hooks/useFps): Hook that measures frames per second - [useFullscreen](https://reactuse.org/functions/hooks/useFullscreen): Hook to handle fullscreen events - [useGamepad](https://reactuse.org/functions/hooks/useGamepad): Hook for getting information about gamepad - [useGeolocation](https://reactuse.org/functions/hooks/useGeolocation): Hook that returns the current geolocation - [useMeasure](https://reactuse.org/functions/hooks/useMeasure): Hook to measure the size and position of an element - [useMediaControls](https://reactuse.org/functions/hooks/useMediaControls): Hook that provides controls for HTML media elements (audio/video) - [useMediaQuery](https://reactuse.org/functions/hooks/useMediaQuery): Hook that manages a media query - [useMemory](https://reactuse.org/functions/hooks/useMemory): Hook that gives you current memory usage - [useNetwork](https://reactuse.org/functions/hooks/useNetwork): Hook to track network status - [useObjectUrl](https://reactuse.org/functions/hooks/useObjectUrl): Hook that creates and revokes an object URL for a Blob or MediaSource - [useOnline](https://reactuse.org/functions/hooks/useOnline): Hook that manages if the user is online - [useOtpCredential](https://reactuse.org/functions/hooks/useOtpCredential): Hook that creates an otp credential - [usePermission](https://reactuse.org/functions/hooks/usePermission): Hook that gives you the state of permission - [usePictureInPicture](https://reactuse.org/functions/hooks/usePictureInPicture): Hook that provides Picture-in-Picture functionality for video elements - [usePointerLock](https://reactuse.org/functions/hooks/usePointerLock): Hook that provides reactive pointer lock - [usePostMessage](https://reactuse.org/functions/hooks/usePostMessage): Hook that allows you to receive messages from other origins - [useRaf](https://reactuse.org/functions/hooks/useRaf): Hook that defines the logic for raf callback - [useShare](https://reactuse.org/functions/hooks/useShare): Hook that utilizes the share api - [useSpeechRecognition](https://reactuse.org/functions/hooks/useSpeechRecognition): Hook that provides a streamlined interface for incorporating speech-to-text functionality - [useSpeechSynthesis](https://reactuse.org/functions/hooks/useSpeechSynthesis): Hook that provides speech synthesis functionality - [useSticky](https://reactuse.org/functions/hooks/useSticky): Hook that allows you to detect that your sticky component is stuck - [useVibrate](https://reactuse.org/functions/hooks/useVibrate): Hook that provides vibrate api - [useVirtualKeyboard](https://reactuse.org/functions/hooks/useVirtualKeyboard): Hook that manages virtual keyboard state - [useWakeLock](https://reactuse.org/functions/hooks/useWakeLock): Hook that provides a wake lock functionality - [useWebSocket](https://reactuse.org/functions/hooks/useWebSocket): Hook that connects to a WebSocket server and handles incoming and outgoing messages ### Debugs - [useLogger](https://reactuse.org/functions/hooks/useLogger): Hook for debugging lifecycle - [useRenderCount](https://reactuse.org/functions/hooks/useRenderCount): Hook returns count component render times - [useRenderInfo](https://reactuse.org/functions/hooks/useRenderInfo): Hook for getting information about component rerender - [useRerender](https://reactuse.org/functions/hooks/useRerender): Hook that defines the logic to force rerender a component ### Elementss - [useActiveElement](https://reactuse.org/functions/hooks/useActiveElement): Hook for tracking the active element - [useAutoScroll](https://reactuse.org/functions/hooks/useAutoScroll): Hook that automatically scrolls a list element to the bottom - [useClickOutside](https://reactuse.org/functions/hooks/useClickOutside): Hook to handle click events outside the specified target element(s) - [useContextMenu](https://reactuse.org/functions/hooks/useContextMenu): Hook that handles custom context menus on desktop and long press on touch devices - [useDoubleClick](https://reactuse.org/functions/hooks/useDoubleClick): Hook that defines the logic when double clicking an element - [useDropZone](https://reactuse.org/functions/hooks/useDropZone): Hook that provides drop zone functionality - [useFileDialog](https://reactuse.org/functions/hooks/useFileDialog): Hook to handle file input - [useFocus](https://reactuse.org/functions/hooks/useFocus): Hook that allows you to focus on a specific element - [useFocusTrap](https://reactuse.org/functions/hooks/useFocusTrap): Hook that traps focus within a given element - [useHover](https://reactuse.org/functions/hooks/useHover): Hook that defines the logic when hovering an element - [useImage](https://reactuse.org/functions/hooks/useImage): Hook that load an image in the browser - [useLockScroll](https://reactuse.org/functions/hooks/useLockScroll): Hook that locks scroll on an element or document body - [useLongPress](https://reactuse.org/functions/hooks/useLongPress): Hook that defines the logic when long pressing an element - [usePaint](https://reactuse.org/functions/hooks/usePaint): Hook that allows you to draw in a specific area - [useScript](https://reactuse.org/functions/hooks/useScript): Hook that manages a script with onLoad, onError, and removeOnUnmount functionalities - [useSize](https://reactuse.org/functions/hooks/useSize): Hook that observes and returns the width and height of element - [useTextareaAutosize](https://reactuse.org/functions/hooks/useTextareaAutosize): Hook that automatically adjusts textarea height based on content - [useTextDirection](https://reactuse.org/functions/hooks/useTextDirection): Hook that can get and set the direction of the element ### Humors - [useFul](https://reactuse.org/functions/hooks/useFul): Hook that can be so useful - [useLess](https://reactuse.org/functions/hooks/useLess): Hook that can be so useless - [useOnce](https://reactuse.org/functions/hooks/useOnce): Hook that runs an effect only once. Please do not use it in production code! ### Lifecycles - [useAsyncEffect](https://reactuse.org/functions/hooks/useAsyncEffect): Hook that triggers the effect callback on updates - [useDidUpdate](https://reactuse.org/functions/hooks/useDidUpdate): Hook that triggers the effect callback on updates - [useIsFirstRender](https://reactuse.org/functions/hooks/useIsFirstRender): Hook that returns true if the component is first render - [useIsomorphicLayoutEffect](https://reactuse.org/functions/hooks/useIsomorphicLayoutEffect): Hook conditionally selects either `useLayoutEffect` or `useEffect` based on the environment - [useMount](https://reactuse.org/functions/hooks/useMount): Hook that executes a callback when the component mounts - [useShallowEffect](https://reactuse.org/functions/hooks/useShallowEffect): Hook that executes an effect only when dependencies change shallowly or deeply - [useUnmount](https://reactuse.org/functions/hooks/useUnmount): Hook that defines the logic when unmounting a component ### Sensorss - [useDeviceMotion](https://reactuse.org/functions/hooks/useDeviceMotion): Hook that work with device motion - [useDeviceOrientation](https://reactuse.org/functions/hooks/useDeviceOrientation): Hook that provides the current device orientation - [useHotkeys](https://reactuse.org/functions/hooks/useHotkeys): Hook that listens for hotkeys - [useIdle](https://reactuse.org/functions/hooks/useIdle): Hook that defines the logic when the user is idle - [useInfiniteScroll](https://reactuse.org/functions/hooks/useInfiniteScroll): Hook that defines the logic for infinite scroll - [useIntersectionObserver](https://reactuse.org/functions/hooks/useIntersectionObserver): Hook that gives you intersection observer state - [useKeyboard](https://reactuse.org/functions/hooks/useKeyboard): Hook that helps to listen for keyboard events - [useKeyPress](https://reactuse.org/functions/hooks/useKeyPress): Hook that listens for key press events - [useKeysPressed](https://reactuse.org/functions/hooks/useKeysPressed): Hook that tracks all currently pressed keyboard keys and their codes - [useMouse](https://reactuse.org/functions/hooks/useMouse): Hook that manages a mouse position - [useMutationObserver](https://reactuse.org/functions/hooks/useMutationObserver): Hook that gives you mutation observer state - [useOrientation](https://reactuse.org/functions/hooks/useOrientation): Hook that provides the current screen orientation - [usePageLeave](https://reactuse.org/functions/hooks/usePageLeave): Hook what calls given function when mouse leaves the page - [useParallax](https://reactuse.org/functions/hooks/useParallax): Hook to help create parallax effect - [usePerformanceObserver](https://reactuse.org/functions/hooks/usePerformanceObserver): Hook that allows you to observe performance entries - [useResizeObserver](https://reactuse.org/functions/hooks/useResizeObserver): Hook that gives you resize observer state - [useScroll](https://reactuse.org/functions/hooks/useScroll): Hook that allows you to control scroll a element - [useScrollIntoView](https://reactuse.org/functions/hooks/useScrollIntoView): Hook that provides functionality to scroll an element into view - [useScrollTo](https://reactuse.org/functions/hooks/useScrollTo): Hook for scrolling to a specific element - [useSwipe](https://reactuse.org/functions/hooks/useSwipe): Hook that tracks swipe gestures for touch and pointer events - [useTextSelection](https://reactuse.org/functions/hooks/useTextSelection): Hook that manages the text selection - [useVisibility](https://reactuse.org/functions/hooks/useVisibility): Hook that gives you visibility observer state - [useWindowEvent](https://reactuse.org/functions/hooks/useWindowEvent): Hook attaches an event listener to the window object for the specified event - [useWindowFocus](https://reactuse.org/functions/hooks/useWindowFocus): Hook that provides the current focus state of the window - [useWindowScroll](https://reactuse.org/functions/hooks/useWindowScroll): Hook that manages the window scroll position - [useWindowSize](https://reactuse.org/functions/hooks/useWindowSize): Hook that manages a window size ### States - [useBoolean](https://reactuse.org/functions/hooks/useBoolean): Hook provides opportunity to manage boolean state - [useControllableState](https://reactuse.org/functions/hooks/useControllableState): Hook that manages both controlled and uncontrolled state patterns - [useCookie](https://reactuse.org/functions/hooks/useCookie): Hook that manages cookie value - [useCookies](https://reactuse.org/functions/hooks/useCookies): Hook that manages cookie values - [useCounter](https://reactuse.org/functions/hooks/useCounter): Hook that manages a counter - [useDefault](https://reactuse.org/functions/hooks/useDefault): Hook that returns the default value - [useDisclosure](https://reactuse.org/functions/hooks/useDisclosure): Hook that allows you to open and close a modal - [useField](https://reactuse.org/functions/hooks/useField): Hook to manage a form field - [useHash](https://reactuse.org/functions/hooks/useHash): Hook that manages the hash value - [useList](https://reactuse.org/functions/hooks/useList): Hook that provides state and helper methods to manage a list of items - [useLocalStorage](https://reactuse.org/functions/hooks/useLocalStorage): Hook that manages local storage value - [useMap](https://reactuse.org/functions/hooks/useMap): Hook that manages a map structure - [useMask](https://reactuse.org/functions/hooks/useMask): Hook to apply an input mask - [useMergedRef](https://reactuse.org/functions/hooks/useMergedRef): Hook that merges multiple refs into a single ref - [useObject](https://reactuse.org/functions/hooks/useObject): Hook that provides state and helper methods to manage an object - [useOffsetPagination](https://reactuse.org/functions/hooks/useOffsetPagination): Hook that defines the logic when pagination - [useQueue](https://reactuse.org/functions/hooks/useQueue): Hook that manages a queue - [useRafState](https://reactuse.org/functions/hooks/useRafState): Hook that returns the value and a function to set the value - [useRefState](https://reactuse.org/functions/hooks/useRefState): Hook that returns the state reference of the value - [useSessionStorage](https://reactuse.org/functions/hooks/useSessionStorage): Hook that manages session storage value - [useSet](https://reactuse.org/functions/hooks/useSet): Hook that manages a set structure - [useStateHistory](https://reactuse.org/functions/hooks/useStateHistory): Hook that manages state with history functionality - [useStep](https://reactuse.org/functions/hooks/useStep): Hook that create stepper - [useStorage](https://reactuse.org/functions/hooks/useStorage): Hook that manages storage value - [useToggle](https://reactuse.org/functions/hooks/useToggle): Hook that create toggle - [useUrlSearchParam](https://reactuse.org/functions/hooks/useUrlSearchParam): Hook that provides reactive URLSearchParams for a single key - [useUrlSearchParams](https://reactuse.org/functions/hooks/useUrlSearchParams): Hook that provides reactive URLSearchParams - [useWizard](https://reactuse.org/functions/hooks/useWizard): Hook that manages a wizard ### Times - [useInterval](https://reactuse.org/functions/hooks/useInterval): Hook that makes and interval and returns controlling functions - [useProgress](https://reactuse.org/functions/hooks/useProgress): Hook that creates a lightweight progress bar - [useStopwatch](https://reactuse.org/functions/hooks/useStopwatch): Hook that creates a stopwatch functionality - [useTime](https://reactuse.org/functions/hooks/useTime): Hook that gives you current time in different values - [useTimeout](https://reactuse.org/functions/hooks/useTimeout): Hook that executes a callback function after a specified delay - [useTimer](https://reactuse.org/functions/hooks/useTimer): Hook that creates a timer functionality ### Users - [useBrowserLanguage](https://reactuse.org/functions/hooks/useBrowserLanguage): Hook that returns the current browser language - [useOperatingSystem](https://reactuse.org/functions/hooks/useOperatingSystem): Hook that returns the operating system of the current browser - [usePreferredColorScheme](https://reactuse.org/functions/hooks/usePreferredColorScheme): Hook that returns user preferred color scheme - [usePreferredContrast](https://reactuse.org/functions/hooks/usePreferredContrast): Hook that returns the contrast preference - [usePreferredDark](https://reactuse.org/functions/hooks/usePreferredDark): Hook that returns if the user prefers dark mode - [usePreferredLanguages](https://reactuse.org/functions/hooks/usePreferredLanguages): that returns a browser preferred languages from navigator - [usePreferredReducedMotion](https://reactuse.org/functions/hooks/usePreferredReducedMotion): Hook that returns the reduced motion preference ### Utilitiess - [useBatchedCallback](https://reactuse.org/functions/hooks/useBatchedCallback): Hook that batches calls and forwards them to a callback - [useConst](https://reactuse.org/functions/hooks/useConst): Hook that returns the constant value - [useDebounceCallback](https://reactuse.org/functions/hooks/useDebounceCallback): Hook that creates a debounced callback - [useDebounceEffect](https://reactuse.org/functions/hooks/useDebounceEffect): Hook that runs an effect after a delay when dependencies change - [useDebounceState](https://reactuse.org/functions/hooks/useDebounceState): Hook that creates a debounced state - [useDebounceValue](https://reactuse.org/functions/hooks/useDebounceValue): Hook that creates a debounced value - [useDevicePixelRatio](https://reactuse.org/functions/hooks/useDevicePixelRatio): Hook that returns the device's pixel ratio - [useEvent](https://reactuse.org/functions/hooks/useEvent): Hook that creates an event and returns a stable reference of it - [useLastChanged](https://reactuse.org/functions/hooks/useLastChanged): Hook for records the timestamp of the last change - [useLatest](https://reactuse.org/functions/hooks/useLatest): Hook that returns the stable reference of the value - [usePrevious](https://reactuse.org/functions/hooks/usePrevious): Hook that returns the previous value - [useThrottleCallback](https://reactuse.org/functions/hooks/useThrottleCallback): Hook that creates a throttled callback - [useThrottleEffect](https://reactuse.org/functions/hooks/useThrottleEffect): Hook that runs an effect at most once per delay period when dependencies change - [useThrottleState](https://reactuse.org/functions/hooks/useThrottleState): Hook that creates a throttled state - [useThrottleValue](https://reactuse.org/functions/hooks/useThrottleValue): Hook that creates a throttled value