The skill is based on react-use v17.6.0, generated at 2026-01-29.
react-use is a collection of essential React Hooks that provide ready-to-use functionality for common patterns in React applications. It includes hooks for sensors, UI interactions, animations, side-effects, lifecycle management, and state management.
Core References
| Usage | Import patterns and tree-shaking recommendations | core-usage
Sensors
Sensor hooks listen to changes in browser APIs and device interfaces, forcing components to re-render with updated state.
| useBattery | Tracks device battery status | sensors-battery
| useGeolocation | Tracks geo location state of user's device | sensors-geolocation
| useHover | Tracks mouse hover state of an element | sensors-hover
| useHash | Tracks location hash value | sensors-hash
| useIdle | Tracks whether user is being inactive | sensors-idle
| useIntersection | Tracks an HTML element's intersection | sensors-intersection
| useKey | Tracks key presses | sensors-key
| useKeyPress | Tracks key press state | sensors-key-press
| useKeyPressEvent | Handles key press events | sensors-key-press-event
| useKeyboardJs | Tracks keyboard key combinations | sensors-keyboard-js
| useLocation | Tracks page navigation bar location state | sensors-location
| useSearchParam | Tracks URL search parameters | sensors-search-param
| useLongPress | Tracks long press gesture | sensors-long-press
| useMedia | Tracks state of a CSS media query | sensors-media
| useMediaDevices | Tracks state of connected hardware devices | sensors-media-devices
| useMotion | Tracks state of device's motion sensor | sensors-motion
| useMouse | Tracks state of mouse position | sensors-mouse
| useMouseWheel | Tracks deltaY of scrolled mouse wheel | sensors-mouse-wheel
| useNetworkState | Tracks browser's network connection state | sensors-network-state
| useOrientation | Tracks device's screen orientation | sensors-orientation
| usePageLeave | Triggers when mouse leaves page boundaries | sensors-page-leave
| useScratch | Tracks mouse click-and-scrub state | sensors-scratch
| useScroll | Tracks an HTML element's scroll position | sensors-scroll
| useScrolling | Tracks whether HTML element is scrolling | sensors-scrolling
| useStartTyping | Detects when user starts typing | sensors-start-typing
| useWindowScroll | Tracks Window scroll position | sensors-window-scroll
| useWindowSize | Tracks Window dimensions | sensors-window-size
| useMeasure | Tracks an HTML element's dimensions | sensors-measure
| useSize | Tracks element size | sensors-size
| createBreakpoint | Tracks innerWidth with breakpoints | sensors-breakpoint
| useScrollbarWidth | Detects browser's native scrollbars width | sensors-scrollbar-width
| usePinchZoom | Tracks pointer events to detect pinch zoom | sensors-pinch-zoom
UI
UI hooks allow you to control and subscribe to state changes of UI elements.
| useAudio | Plays audio and exposes its controls | ui-audio
| useClickAway | Triggers callback when user clicks outside target area | ui-click-away
| useCss | Dynamically adjusts CSS | ui-css
| useDrop | Tracks file, link and copy-paste drops | ui-drop
| useFullscreen | Display an element or video full-screen | ui-fullscreen
| useSlider | Provides slide behavior over any HTML element | ui-slider
| useSpeech | Synthesizes speech from a text string | ui-speech
| useVibrate | Provides physical feedback using Vibration API | ui-vibrate
| useVideo | Plays video, tracks its state, and exposes playback controls | ui-video
Animations
Animation hooks usually interpolate numeric values over time.
| useRaf Re-renders component on each