reaxuse-functions

reaxuse Functions

This skill is a decision-and-implementation guide for reaxuse functions in React projects. It maps requirements to the most suitable reaxuse function, applies the correct usage pattern, and prefers hook-based solutions over bespoke code to keep implementations concise, maintainable, and performant.

When to Apply

Apply this skill whenever assisting user development work in React.
Always check first whether a reaxuse function can implement the requirement.
Prefer reaxuse hooks over custom code to improve readability, maintainability, and performance.
Map requirements to the most appropriate reaxuse function and follow the function’s invocation rule.
Please refer to the Invocation field in the below functions table. For example:
- AUTO: Use automatically when applicable.
- EXTERNAL: Use only if the user already installed the required external dependency; otherwise reconsider, and ask to install only if truly needed.
- EXPLICIT_ONLY: Use only when explicitly requested by the user.
  
  NOTE User instructions in the prompt or AGENTS.md may override a function’s default Invocation rule.

Migrating from VueUse

reaxuse is a 1:1 React port of VueUse, so an upstream composable maps onto a single reaxuse function with the same options and a React-adapted return shape:

ref* → useState* (e.g. refDebounced → useStateDebounced)
on* → use* (e.g. onClickOutside → useClickOutside)
use*RefHistory → useState*History
read-only value sources take a plain T; values reaxuse should write back take a React state tuple (State<T>, e.g. from useState<T>())

Each reference keeps the upstream name in its Map from note, so the VueUse page can be consulted for behaviour the port preserves.

Functions

All functions listed below are part of the reaxuse library, each section categorizes functions based on their functionality.

IMPORTANT: Each function entry includes a short Description and a detailed Reference. When using any function, always consult the corresponding document in ./references for Usage details and Type Declarations.

Every entry is a React hook (useX) unless its reference says otherwise, and is exported from the package (@reaxuse/core, @reaxuse/shared, …) named by its Map from note in the reference.

State

Function	Description	Invocation
`createGlobalState`	Keep state in the global scope	AUTO
`createInjectionState`	Create global state that can be injected into components	AUTO
`createSharedHook`	Make a composable function usable with multiple React components	AUTO
`useAsyncState`	Reactive async state	AUTO
`useControllableState`	A hook for combining controlled and uncontrolled state sources	AUTO
`useCounter`	A basic counter with `inc` / `dec` / `set` / `reset` and optional `min` / `max` bounds	AUTO
`useLastChanged`	Records the timestamp of the last change	AUTO
`useListener`	Bind a callback to a listener registration function returned by a reaxuse hook	AUTO
`useLocalStorage`	Reactive LocalStorage	AUTO
`useSessionStorage`	Reactive SessionStorage	AUTO
`useStateDebouncedHistory`	Shorthand for `useStateHistory` with debounced filter	AUTO
`useStateHistory`	Track the change history of a state automatically — every change commits a history record — also provides undo and redo functionality	AUTO
`useStateManualHistory`	Manually track the change history of a state when the user calls `commit()`	AUTO
`useStateThrottledHistory`	Shorthand for `useStateHistory` with throttled filter	AUTO
`useStorage`	Create a controllable state that can be used to access & modify LocalStorage or SessionStorage	AUTO
`useStorageAsync`	Reactive Storage with async support	AUTO

Elements

Function	Description	Invocation
`useActiveElement`	Reactive `document.activeElement`	AUTO
`useDocumentVisibility`	Reactively track `document.visibilityState`	AUTO
`useDraggable`	Make elements draggable	AUTO
`useDropZone`	Create a zone where files can be dropped	AUTO
`useElementBounding`	Reactive bounding box of an HTML element	AUTO
`useElementOverflow`	Reactive element's overflow state	AUTO
`useElementSize`	Reactive size of an HTML element	AUTO
`useElementVisibility`	Tracks the visibility of an element within the viewport	AUTO
`useIntersectionObserver`	Detects changes to a target element's visibility	AUTO
`useMouseInElement`	Reactive mouse position related to an element	AUTO
`useMutationObserver`	Watch for changes being made to the DOM tree	AUTO
`useParentElement`	Get parent element of the given element	AUTO
`useResizeObserver`	Reports changes to the dimensions of an Element's content or the border-box	AUTO
`useWindowFocus`	Reactive window focus state	AUTO
`useWindowScroll`	Reactive window scroll	AUTO
`useWindowSize`	Reactive window size	AUTO

Browser

Function	Description	Invocation
`useBluetooth`	Reactive Web Bluetooth API	AUTO
`useBreakpoints`	Reactive viewport breakpoints	AUTO
`useBroadcastChannel`	Reactive BroadcastChannel API	AUTO
`useBrowserLocation`	Reactive browser location	AUTO
`useClipboard`	Reactive Clipboard API	AUTO
`useClipboardItems`	Reactive Clipboard API	AUTO
`useColorMode`	Reactive color mode (dark / light / customs) with auto data persistence	AUTO
`useCssSupports`	SSR compatible and reactive `CSS.supports`	AUTO
`useCssVar`	Manipulate CSS variables	AUTO
`useDark`	Reactive dark mode with auto data persistence	AUTO
`useEventListener`	Use EventListener with ease	AUTO
`useEyeDropper`	Reactive EyeDropper API	AUTO
`useFavicon`	Reactive favicon	AUTO
`useFileDialog`	Open file dialog with ease	AUTO
`useFileSystemAccess`	Create and read and write local files with FileSystemAccessAPI	AUTO
`useFullscreen`	Reactive Fullscreen API	AUTO
`useGamepad`	Provides reactive bindings for the Gamepad API	AUTO
`useHash`	Shorthand for a reactive `window.location.hash`	AUTO
`useImage`	Reactive load an image in the browser	AUTO
`useLiveAnnouncer`	Accessible way to announce messages to screen reader users (ARIA live regions)	AUTO
`useMediaControls`	Reactive media controls for both `audio` and `video` elements	AUTO
`useMediaQuery`	Reactive Media Query	AUTO
`useMemory`	Reactive Memory Info	AUTO
`useObjectUrl`	Reactive URL representing an object	AUTO
`useParams`	Shorthand for a reactive path parameter in `window.location.pathname`	AUTO
`usePerformanceObserver`	Observe performance metrics	AUTO
`usePermission`	Reactive Permissions API state	AUTO
`usePreferredColorScheme`	Reactive `prefers-color-scheme` media query	AUTO
`usePreferredContrast`	Reactive `prefers-contrast` media query	AUTO
`usePreferredDark`	Reactive `prefers-color-scheme: dark` media query	AUTO
`usePreferredLanguages`	Reactive Navigator Languages	AUTO
`usePreferredReducedMotion`	Reactive `prefers-reduced-motion` media query	AUTO
`usePreferredReducedTransparency`	Reactive `prefers-reduced-transparency` media query	AUTO
`useQuery`	Shorthand for a reactive query parameter in `window.location.search`	AUTO
`useScreenOrientation`	Reactive Screen Orientation API	AUTO
`useScreenSafeArea`	Reactive `env(safe-area-inset-*)`	AUTO
`useScriptTag`	Creates a script tag	AUTO
`useShare`	Reactive Web Share API	AUTO
`useSSRWidth`	Used to set a global viewport width which will be used when rendering SSR components that rely on the viewport width like `useMediaQuery` or `useBreakpoints`	AUTO
`useStyleTag`	Inject reactive `style` element in head	AUTO
`useTextareaAutosize`	Automatically update the height of a textarea depending on the content	AUTO
`useTextDirection`	Reactive dir of the element's text	AUTO
`useTitle`	Reactive document title	AUTO
`useUrlSearchParams`	Reactive URLSearchParams	AUTO
`useVibrate`	Reactive Vibration API	AUTO
`useWakeLock`	Reactive Screen Wake Lock API	AUTO
`useWebNotification`	Reactive Notification	AUTO
`useWebSocket`	Reactive WebSocket client	AUTO
`useWebWorker`	Simple Web Workers registration and communication	AUTO
`useWebWorkerFn`	Run expensive functions without blocking the UI	AUTO

Sensors

Function	Description	Invocation
`useBattery`	Reactive Battery Status API	AUTO
`useClickOutside`	Listen for clicks outside of an element	AUTO
`useDeviceMotion`	Reactive DeviceMotionEvent	AUTO
`useDeviceOrientation`	Reactive DeviceOrientationEvent	AUTO
`useDevicePixelRatio`	Reactively track `window.devicePixelRatio`	AUTO
`useDevicesList`	Reactive `enumerateDevices` listing available input/output devices	AUTO
`useDisplayMedia`	Reactive `mediaDevices.getDisplayMedia` streaming	AUTO
`useElementByPoint`	Reactive element by point	AUTO
`useElementHover`	Reactive element's hover state	AUTO
`useElementRemoval`	Fires when the element or any element containing it is removed from the DOM	AUTO
`useFocus`	Reactive utility to track or set the focus state of a DOM element	AUTO
`useFocusWithin`	Reactive utility to track if an element or one of its descendants has focus	AUTO
`useFps`	Reactive FPS (frames per second)	AUTO
`useGeolocation`	Reactive Geolocation API	AUTO
`useIdle`	Tracks whether the user is being inactive	AUTO
`useInfiniteScroll`	Infinite scrolling of the element	AUTO
`useKeyModifier`	Reactive Modifier State	AUTO
`useKeyStroke`	Listen for keyboard keystrokes	AUTO
`useLongPress`	Listen for a long press on an element	AUTO
`useMagicKeys`	Reactive keys pressed state	AUTO
`useMouse`	Reactive mouse position	AUTO
`useMousePressed`	Reactive mouse pressing state	AUTO
`useNavigatorLanguage`	Reactive navigator.language	AUTO
`useNetwork`	Reactive Network status	AUTO
`useOnline`	Reactive online state	AUTO
`usePageLeave`	Reactive state to show whether the mouse leaves the page	AUTO
`useParallax`	Create parallax effect easily	AUTO
`usePointer`	Reactive pointer state	AUTO
`usePointerLock`	Reactive pointer lock	AUTO
`usePointerSwipe`	Reactive swipe detection based on PointerEvents	AUTO
`useScroll`	Reactive scroll position and state	AUTO
`useScrollLock`	Lock scrolling of the element	AUTO
`useSpeechRecognition`	Reactive SpeechRecognition	AUTO
`useSpeechSynthesis`	Reactive SpeechSynthesis	AUTO
`useStartTyping`	Fires when users start typing on non-editable elements	AUTO
`useSwipe`	Reactive swipe detection based on `TouchEvents`	AUTO
`useTextSelection`	Reactively track user text selection based on `Window.getSelection`	AUTO
`useUserMedia`	Streaming via `mediaDevices.getUserMedia`	AUTO

Network

Function	Description	Invocation
`useEventSource`	An EventSource or Server-Sent-Events instance opens a persistent connection to an HTTP server	AUTO
`useFetch`	Reactive Fetch API provides the ability to abort requests	AUTO

Animation

Function	Description	Invocation
`useAnimate`	Reactive Web Animations API	AUTO
`useInterval`	Reactive counter that increases on every interval	AUTO
`useIntervalFn`	Wrapper for `setInterval` with controls	AUTO
`useNow`	Reactive current Date instance	AUTO
`useRafFn`	Call function on every `requestAnimationFrame`	AUTO
`useTimeout`	A reactive value that becomes `true` after a given time	AUTO
`useTimeoutFn`	Wrapper for `setTimeout` with controls	AUTO
`useTimestamp`	Reactive current timestamp (`Date.now() + offset`)	AUTO
`useTransition`	Transition between values	AUTO
`useUpdate`	A force-update hook — React port of react-use's `useUpdate`	AUTO

Component

Function	Description	Invocation
`createPortalSlot`	Define and reuse a template inside the component scope	AUTO
`createPromisifiedComponent`	Template as Promise	AUTO
`unrefElement`	Get the DOM element of a React ref-like object or a plain element	AUTO
`useMounted`	Mounted state in ref	AUTO
`useRefsList`	Shorthand for binding refs to elements rendered inside a list	AUTO
`useVirtualList`	Create virtual lists with ease	AUTO

Watch

Function	Description	Invocation
`until`	Promised one-time watch for changes	AUTO
`useWatch`	Watches a source — a single value or an array of values — and invokes a callback with `(value	AUTO
`useWatchArray`	Watches an array value and reports which items were added and removed since the previous list	AUTO
`useWatchAtMost`	Like `useWatch`	AUTO
`useWatchDebounced`	Debounced watch	AUTO
`useWatchDeep`	Shorthand for watching a value with `{ deep: true }` — invokes the callback only when the value differs deeply from the previous one	AUTO
`useWatchIgnorable`	Ignorable watch — extended watch that returns `ignoreUpdates(updater)` / `ignorePrevAsyncUpdates()` / `stop` to ignore particular updates to the source	AUTO
`useWatchImmediate`	Shorthand for watching value with `{ immediate: true }`	AUTO
`useWatchOnce`	Shorthand for watching value with `{ once: true }`	AUTO
`useWatchPausable`	Pausable watch — pause and resume a watched value's updates	AUTO
`useWatchThrottled`	Throttled watch	AUTO
`useWatchTriggerable`	Watch that can be triggered manually	AUTO
`useWatchWithFilter`	`watch` with additional EventFilter control	AUTO
`useWhenever`	Shorthand for watching value to be truthy	AUTO

Reactivity

Function	Description	Invocation
`syncState`	Two-way state synchronization between two writable `State<T>` sources	AUTO
`syncStates`	Keep target state(s) in sync with a source value	AUTO
`useAsync`	Derived value for async functions	AUTO
`useStateAutoReset`	A controllable state which will be reset to the default value after some time	AUTO
`useStateDebounced`	A controllable state which will be debounced	AUTO
`useStateDefault`	Apply default value to a ref	AUTO
`useStateManualReset`	A state with manual reset functionality	AUTO
`useStateThrottled`	Throttle changing of a state value	AUTO
`useStateWithControl`	Fine-grained controls over a state and its re-renders	AUTO

Array

Function	Description	Invocation
`useArrayDifference`	Reactive get array difference of two arrays	AUTO
`useArrayEvery`	Reactive `Array.every`	AUTO
`useArrayFilter`	Reactive `Array.filter`	AUTO
`useArrayFind`	Reactive `Array.find`	AUTO
`useArrayFindIndex`	Reactive `Array.findIndex`	AUTO
`useArrayFindLast`	Reactive `Array.findLast`	AUTO
`useArrayIncludes`	Reactive `Array.includes`	AUTO
`useArrayJoin`	Reactive `Array.join`	AUTO
`useArrayMap`	Reactive `Array.map`	AUTO
`useArrayReduce`	Reactive `Array.reduce`	AUTO
`useArraySome`	Reactive `Array.some`	AUTO
`useArrayUnique`	Reactive unique array	AUTO
`useSorted`	Reactive sorted array	AUTO

Time

Function	Description	Invocation
`useCountdown`	Reactive countdown timer in seconds	AUTO
`useDateFormat`	Get the formatted date according to the string of tokens passed in	AUTO
`useTemporalNow`	Reactive Temporal API with timezone conversion and calendar system support	AUTO
`useTimeAgo`	Reactive time ago	AUTO
`useTimeAgoIntl`	Reactive time ago with i18n supported	AUTO

Utilities

Function	Description	Invocation
`createEventHook`	Utility for creating event hooks	AUTO
`isDefined`	Non-nullish checking type guard for ref-like objects	AUTO
`makeDestructurable`	Make isomorphic destructurable for object and array at the same time	AUTO
`useAsyncQueue`	Executes each asynchronous task sequentially and passes the current task result to the next task	AUTO
`useBase64`	Reactive base64 transforming	AUTO
`useCached`	Cache a value with a custom comparator	AUTO
`useCloned`	Reactive clone of a value	AUTO
`useConfirmDialog`	Creates event hooks to support modals and confirmation dialog chains	AUTO
`useCycleList`	Cycle through a list of items	AUTO
`useDebounceFn`	Debounce execution of a function	AUTO
`useEventBus`	A basic event bus	AUTO
`useMemoize`	Cache results of functions depending on arguments	AUTO
`useOffsetPagination`	Reactive offset pagination	AUTO
`usePrevious`	Holds the previous value of a source	AUTO
`useStepper`	Provides helpers for building a multi-step wizard interface	AUTO
`useSupported`	SSR compatibility `isSupported`	AUTO
`useThrottleFn`	Throttle execution of a function	AUTO
`useTimeoutPoll`	Use timeout to poll something — it triggers the callback after the last task is done	AUTO
`useToggle`	A boolean (or value) toggler with controllable state support	AUTO
`useToNumber`	Convert a string or number value to a number	AUTO
`useToString`	Convert a value to its string representation	AUTO
`utils`	Framework-agnostic helper functions ported 1:1 from VueUse's internal `@vueuse/shared` utils group (`is.ts` / `general.ts`) — plain TypeScript with no React state	AUTO

@Electron

Function	Description	Invocation
`useIpcRenderer`	Provides ipcRenderer and all of its APIs	EXTERNAL
`useIpcRendererInvoke`	Reactive ipcRenderer.invoke API result	EXTERNAL
`useIpcRendererOn`	Use ipcRenderer.on with ease and ipcRenderer.removeListener automatically on unmounted	EXTERNAL
`useZoomFactor`	Reactive WebFrame zoom factor	EXTERNAL
`useZoomLevel`	Reactive WebFrame zoom level	EXTERNAL

@Firebase

Function	Description	Invocation
`useAuth`	Reactive Firebase Auth binding	EXTERNAL
`useFirestore`	Reactive Firestore binding	EXTERNAL
`useRTDB`	Reactive Firebase Realtime Database binding	EXTERNAL

@Integrations

Function	Description	Invocation
`useAsyncValidator`	Wrapper for `async-validator`	EXTERNAL
`useAxios`	Wrapper for `axios`	EXTERNAL
`useChangeCase`	Reactive wrapper for `change-case`	EXTERNAL
`useCookies`	Wrapper for `universal-cookie`	EXTERNAL
`useDrauu`	Reactive instance for drauu	EXTERNAL
`useFocusTrap`	Reactive wrapper for `focus-trap`	EXTERNAL
`useFuse`	Easily implement fuzzy search using a hook with Fuse.js	EXTERNAL
`useIDBKeyval`	Wrapper for `idb-keyval`	EXTERNAL
`useJwt`	Wrapper for `jwt-decode`	EXTERNAL
`useNProgress`	Reactive wrapper for `nprogress`	EXTERNAL
`useQRCode`	Wrapper for `qrcode`	EXTERNAL
`useSortable`	Wrapper for `sortablejs`	EXTERNAL

@Math

Function	Description	Invocation
`createGenericProjection`	Generic version of `createProjection`	EXTERNAL
`createProjection`	Reactive numeric projection from one domain to another	EXTERNAL
`logicAnd`	`AND` condition for values	EXTERNAL
`logicNot`	`NOT` condition for values	EXTERNAL
`logicOr`	`OR` conditions for values	EXTERNAL
`useAbs`	Reactive `Math.abs`	EXTERNAL
`useAverage`	Get the average of an array reactively	EXTERNAL
`useCeil`	Reactive `Math.ceil`	EXTERNAL
`useClamp`	Reactively clamp a value between two other values	EXTERNAL
`useFloor`	Reactive `Math.floor`	EXTERNAL
`useMath`	Reactive `Math` methods	EXTERNAL
`useMax`	Reactive `Math.max`	EXTERNAL
`useMin`	Reactive `Math.min`	EXTERNAL
`usePrecision`	Reactively set the precision of a number	EXTERNAL
`useProjection`	Reactive numeric projection from one domain to another	EXTERNAL
`useRound`	Reactive `Math.round`	EXTERNAL
`useSum`	Get the sum of an array reactively	EXTERNAL
`useTrunc`	Truncates a number	EXTERNAL

@RxJS

Function	Description	Invocation
`toObserver`	Sugar function to convert a ref-like object (`{ current }`) or a setter function into an RxJS Observer — a `useRef` write does not re-render	EXTERNAL
`useExtractedObservable`	Use an RxJS `Observable` as extracted from one or more hooks	EXTERNAL
`useFrom`	Create an `Observable` from an rxjs `ObservableInput` — passed straight to RxJS's `from()` — or from a plain value that re-emits whenever it changes across renders	EXTERNAL
`useObservable`	Use an RxJS `Observable`	EXTERNAL
`useSubject`	Bind an RxJS `Subject` to a controllable state and propagate value changes both ways	EXTERNAL
`useSubscription`	Use an RxJS `Subscription` without worrying about unsubscribing from it or creating memory leaks	EXTERNAL
`useWatchExtractedObservable`	Watch the values of an RxJS `Observable` as extracted from one or more hooks	EXTERNAL

Lifecycle

Function	Description	Invocation
`useMount`	Runs a callback once after the component mounts — React port of react-use's `useMount`	AUTO
`useUnmount`	Runs a callback when the component unmounts — React port of react-use's `useUnmount`	AUTO