菜单
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
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
基于 SOC 职业分类
MUST be used when building React components with @usels/core, @usels/web, @usels/integrations, "use scope" directive, or observable-bearing props. Covers scope rules, reactive reads, component props, rendering boundaries, library hook interop, third-party integration, and mixing with normal React hooks.
Use when building a custom reactive utility for an app using @usels/core — decides between "use scope" core-only style vs traditional 2-layer hook+core style and shows the pattern for each
Use when writing tests for custom hooks or "use scope" components — covers rerender stability, element lifecycle (null→element→null), and reactive options change scenarios
| 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 |
Observable-native React utility hooks built on Legend-State. 108 hooks across 2 packages:
@usels/coreand@usels/web.
Auto-generated. Run
pnpm skills:buildto regenerate.
| 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... |
| Hook | Description |
|---|---|
createStore | Lazily-initialized store with StoreProvider, effectScope lifecycle, inter-store dependencies, a... |
useScope |
| 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... |
| 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... |
| 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 |
| 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 |
| 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... |
| 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... |
| 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
