use-legend-hooks-catalog

name	use-legend-hooks-catalog
description	Use when looking up what @usels/core or @usels/web hooks exist, their signatures, options, or return types — covers 100+ Observable-native React hooks built on Legend-State

use-legend Hook Catalog

Observable-native React utility hooks built on Legend-State. 108 hooks across 2 packages: @usels/core and @usels/web.

Auto-generated. Run pnpm skills:build to regenerate.

@usels/core

Observe (8 hooks)

Hook	Description
useObserveDebounced	Runs a reactive effect debounced — fires only after ms milliseconds of inactivity. Built on `us...
useObserveIgnorable	Runs a reactive effect with an ignoreUpdates escape hatch. Changes made inside `ignoreUpdates(u...
useObservePausable	Runs a reactive effect with built-in pause/resume controls. Built on useObserveWithFilter. The ...
useObserveThrottled	Runs a reactive effect throttled — fires at most once per ms milliseconds. Built on `useObserve...
useObserveTriggerable	Runs a reactive effect with a manual trigger() method and an ignoreUpdates escape hatch.
useObserveWithFilter	Runs a reactive effect gated by an EventFilter. The selector always tracks dependencies on every ...
useWatch	Runs a reactive effect that skips the first effect execution by default (lazy mode). Pass `immedi...
useWhenever	Shorthand for watching a source and running an effect only when the value is truthy. Built on `wa...

Primitives (2 hooks)

Hook	Description
createStore	Lazily-initialized store with StoreProvider, effectScope lifecycle, inter-store dependencies, a...
useScope

Reactivity (11 hooks)

Hook	Description
useAutoReset	Observable that automatically resets to a default value after a specified delay. Useful for tempo...
useComputedWithControl	Computed Observable with explicit source control and manual trigger. Only recomputes when the dec...
useDataHistory	A hook that automatically tracks changes to an Observable and manages undo/redo history. Records ...
useDebounced	Debounce an Observable value. Creates a read-only Observable that updates only after the source v...
useDebouncedHistory	A hook that tracks Observable change history with debounce. A thin wrapper around `useDataHistory...
useLastChanged	A hook that tracks when a source Observable last changed. Returns a read-only Observable containi...
useManualHistory	A hook for manually managing Observable change history. It only records a snapshot when `commit()...
useManualReset	Observable with a manual reset() function that restores the value to its default. Unlike `useAu...
useRef$	An observable element ref hook that serves as a drop-in replacement for useRef. Works with call...
useThrottled	Throttle an Observable value. Creates a read-only Observable that updates at most once per interv...
useThrottledHistory	A hook that tracks Observable change history with throttle. A thin wrapper around useHistory wi...

Sync (3 hooks)

Hook	Description
useOfflineFirst	Reactive offline-first data binding powered by Legend-State's [sync engine](https://legendapp.com...
useRemote	Reactive remote data binding powered by Legend-State's [sync engine](https://legendapp.com/open-s...
useStorage	Reactive storage binding powered by Legend-State's [persist & sync](https://legendapp.com/open-so...

Timer (10 hooks)

Hook	Description
useCountdown	Reactive countdown timer with pause/resume/reset controls
useFps	Reactive frames-per-second counter using requestAnimationFrame
useInterval	Reactive counter that increments on every interval tick
useIntervalFn	Reactive setInterval wrapper with pause/resume control
useNow	Reactive current Date that auto-updates on every animation frame or interval
useRafFn	Call a function on every requestAnimationFrame with pause/resume control
useTimeAgo	Reactive human-readable time-ago string that auto-updates (powered by date-fns)
useTimeout	Reactive boolean that becomes true after a given delay
useTimeoutFn	Reactive wrapper for setTimeout with start/stop control
useTimestamp	Reactive Unix timestamp (ms) that auto-updates on every animation frame or interval

Utilities (8 hooks)

Hook	Description
createProvider	Collapses React Context + Provider component + useContext hook into a single call. Eliminates boi...
get	Extract values from MaybeObservable types
peek	Extract values from MaybeObservable types without registering a tracking dependency
useDebounceFn	Debounce execution of a function.
useIsMounted
useSupported	SSR-safe browser feature detection as a reactive Observable
useThrottleFn	Throttle execution of a function. Especially useful for rate limiting execution of handlers on ev...
useWhenMounted	Execute a callback and expose its return value as a reactive Observable<T

@usels/web

Browser (15 hooks)

Hook	Description
useAnimate	Reactive [Web Animations API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API...
useCssVar	Reactively read and write CSS custom properties (CSS variables) on DOM elements.
useEventListener	Registers an event listener with addEventListener on mount and automatically removes it with `r...
useLocalStorage	Reactive localStorage binding. Thin wrapper around createStorage with `ObservablePersistLocal...
useMediaQuery	Tracks a CSS media query string as a reactive Observable<boolean>. Subscribes to `MediaQueryLis...
usePreferredColorScheme	Reactive color scheme preference. Returns a ReadonlyObservable tracking the user's preferred co...
usePreferredContrast	Reactive contrast preference. Returns a ReadonlyObservable tracking the user's preferred contra...
usePreferredDark	Reactive dark theme preference. Returns Observable<boolean> that tracks whether the user prefer...
usePreferredLanguages	Reactive browser languages. Returns a ReadonlyObservable<readonly string[]> tracking the user's...
usePreferredReducedMotion	Reactive reduced motion preference. Returns a ReadonlyObservable tracking the user's motion pre...
usePreferredReducedTransparency	Reactive reduced transparency preference. Returns a ReadonlyObservable tracking the user's tran...
useScreenOrientation	Reactive wrapper for the [Screen Orientation API](https://developer.mozilla.org/en-US/docs/Web/AP...
useScriptTag	Dynamically load and unload an external script tag. The script is appended to document.head on ...
useSessionStorage	Reactive sessionStorage binding. Thin wrapper around createStorage with `ObservablePersistSes...
useStyleTag	Dynamically inject and remove a <style> tag in document.head. The tag is appended on mount an...

Elements (13 hooks)

Hook	Description
useDocumentVisibility	Tracks the browser tab's visibility state ('visible' or 'hidden') as a reactive `Observable<D...
useDraggable	Makes any element draggable using Pointer Events. Returns Observable values for position (x$, `...
useDropZone	Turns any element into a file drop zone. Tracks drag-over state and validates file types before a...
useElementBounding	Tracks the bounding rect of a DOM element — x, y, top, right, bottom, left, width, ...
useElementSize	Tracks the width and height of a DOM element using the [ResizeObserver API](https://developer.moz...
useElementVisibility	Tracks whether a DOM element is visible within the viewport (or a specified scroll container). Re...
useIntersectionObserver	Reactive wrapper around the [IntersectionObserver API](https://developer.mozilla.org/en-US/docs/W...
useMouseInElement	Tracks the mouse cursor position relative to a DOM element and reports whether the cursor is insi...
useMutationObserver	Reactive wrapper around the [MutationObserver API](https://developer.mozilla.org/en-US/docs/Web/A...
useParentElement	Returns the parentElement of a target DOM node as a reactive Observable. Re-evaluates wheneve...
useResizeObserver	Observes one or more elements for size changes using the [ResizeObserver API](https://developer.m...
useWindowFocus	Tracks whether the browser window currently has focus as a reactive Observable<boolean>. Update...
useWindowSize	Tracks the browser window dimensions as reactive Observable<number> values for width and height...

Sensors (38 hooks)

Hook	Description
useBattery	Reactive wrapper around the [Battery Status API](https://developer.mozilla.org/en-US/docs/Web/API...
useDeviceMotion	Reactive DeviceMotionEvent....
useDeviceOrientation	Tracks the physical orientation of the device using the deviceorientation window event, exposin...
useDevicePixelRatio	Reactively tracks window.devicePixelRatio using a matchMedia listener. Automatically updates ...
useDevicesList	Reactively enumerates media input/output devices via the MediaDevices API. Provides filtered li...
useDisplayMedia	Reactive wrapper around the [MediaDevices.getDisplayMedia()](https://developer.mozilla.org/en-US/...
useElementByPoint	Reactively tracks the DOM element at specified x/y coordinates using `document.elementFromPoint()...
useElementHover	Reactively tracks whether a DOM element is being hovered. Supports optional enter/leave delays fo...
useFocus	Reactive utility that tracks whether a DOM element has focus, with two-way binding — read the cur...
useFocusWithin	Reactive utility that tracks whether focus is within a container element or any of its descendant...
useGeolocation	Reactively tracks the user's geographic position using the Geolocation API. Wraps `navigator.geol...
useIdle	Tracks whether the user is inactive (idle). Monitors user interaction events like mouse movement,...
useInfiniteScroll	Triggers a load callback whenever the scroll position reaches a boundary of a scrollable element,...
useKeyModifier	Reactively tracks the state of a keyboard modifier key (Shift, Control, Alt, CapsLock, etc.) usin...
useMagicKeys	Reactive key-press state — access any key as a ReadonlyObservable<boolean> that is true while...
useMouse	Tracks the mouse/pointer cursor position reactively. Supports multiple coordinate systems (page...
useMousePressed	Tracks mouse/touch press state reactively. Returns an observable boolean for the pressed state an...
useNavigatorLanguage	Reactively tracks the browser's preferred language via navigator.language. Automatically update...
useNetwork	Reactive network status tracking. Provides online/offline state via navigator.onLine and detail...
useOnClickOutside	Listen for clicks outside of a target element. Useful for closing modals, dropdowns, and popovers...
useOnElementRemoval	Fires a callback when the target element or any ancestor containing it is removed from the DOM. U...
useOnKeyStroke
useOnline	Reactive online state. A thin wrapper around useNetwork that returns...
useOnLongPress	Detect long press gestures on an element. Fires a handler after a configurable delay, with suppor...
useOnStartTyping	Fires a callback when the user starts typing on non-editable elements. Useful for implementing se...
usePageLeave	Reactively detects when the mouse cursor leaves the page. Useful for showing exit-intent popups, ...
useParallax	Creates parallax effects easily. Uses useDeviceOrientation on mobile devices and falls back to ...
usePointer	Reactive pointer state tracking. Monitors pointerdown, pointermove, pointerup, and `pointer...
usePointerLock	Reactive wrapper around the [Pointer Lock API](https://developer.mozilla.org/en-US/docs/Web/API/P...
usePointerSwipe	Reactive swipe detection based on PointerEvents. Detects swipe direction and distance.
useScroll	Tracks the scroll position, scroll direction, arrived state (top/bottom/left/right), and scrollin...
useScrollLock	Lock and unlock scrolling on a target element or document.body. Useful for modals, drawers, and...
useSpeechRecognition	Reactive wrapper around the [Web Speech Recognition API](https://developer.mozilla.org/en-US/docs...
useSpeechSynthesis	Reactive wrapper around the [SpeechSynthesis](https://developer.mozilla.org/en-US/docs/Web/API/Sp...
useSwipe	Reactive swipe detection based on TouchEvents. Detects swipe direction and length.
useTextSelection	Reactively tracks the current text selection on the page. Listens to the selectionchange event ...
useUserMedia	Reactive wrapper around the [MediaDevices.getUserMedia()](https://developer.mozilla.org/en-US/doc...
useWindowScroll	Tracks the window scroll position, direction, arrived state, and scrolling status as reactive `Ob...

---

Total: 108 hooks