npx skills add https://github.com/hairyf/skills --skill react-use该技能基于 react-use v17.6.0，生成于 2026-01-29。
react-use 是一个 React Hooks 的集合，为 React 应用中的常见模式提供了开箱即用的功能。它包含了用于传感器、UI 交互、动画、副作用、生命周期管理和状态管理的钩子。
| 主题 | 描述 | 参考 |
|---|---|---|
| 用法 | 导入模式和摇树优化建议 | core-usage |
传感器钩子监听浏览器 API 和设备接口的变化，强制组件以更新后的状态重新渲染。
| 主题 | 描述 | 参考 |
|---|---|---|
| useBattery | 跟踪设备电池状态 | sensors-battery |
| useGeolocation | 跟踪用户设备的地理位置状态 | sensors-geolocation |
广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者，精准高效
| useHover | 跟踪元素的鼠标悬停状态 | sensors-hover |
| useHash | 跟踪位置哈希值 | sensors-hash |
| useIdle | 跟踪用户是否处于非活动状态 | sensors-idle |
| useIntersection | 跟踪 HTML 元素的交叉状态 | sensors-intersection |
| useKey | 跟踪按键按下 | sensors-key |
| useKeyPress | 跟踪按键按下状态 | sensors-key-press |
| useKeyPressEvent | 处理按键事件 | sensors-key-press-event |
| useKeyboardJs | 跟踪键盘组合键 | sensors-keyboard-js |
| useLocation | 跟踪页面导航栏位置状态 | sensors-location |
| useSearchParam | 跟踪 URL 搜索参数 | sensors-search-param |
| useLongPress | 跟踪长按手势 | sensors-long-press |
| useMedia | 跟踪 CSS 媒体查询的状态 | sensors-media |
| useMediaDevices | 跟踪已连接硬件设备的状态 | sensors-media-devices |
| useMotion | 跟踪设备运动传感器的状态 | sensors-motion |
| useMouse | 跟踪鼠标位置状态 | sensors-mouse |
| useMouseWheel | 跟踪滚动的鼠标滚轮的 deltaY | sensors-mouse-wheel |
| useNetworkState | 跟踪浏览器的网络连接状态 | sensors-network-state |
| useOrientation | 跟踪设备的屏幕方向 | sensors-orientation |
| usePageLeave | 当鼠标离开页面边界时触发 | sensors-page-leave |
| useScratch | 跟踪鼠标点击并擦除状态 | sensors-scratch |
| useScroll | 跟踪 HTML 元素的滚动位置 | sensors-scroll |
| useScrolling | 跟踪 HTML 元素是否正在滚动 | sensors-scrolling |
| useStartTyping | 检测用户何时开始输入 | sensors-start-typing |
| useWindowScroll | 跟踪窗口滚动位置 | sensors-window-scroll |
| useWindowSize | 跟踪窗口尺寸 | sensors-window-size |
| useMeasure | 跟踪 HTML 元素的尺寸 | sensors-measure |
| useSize | 跟踪元素大小 | sensors-size |
| createBreakpoint | 使用断点跟踪 innerWidth | sensors-breakpoint |
| useScrollbarWidth | 检测浏览器原生滚动条的宽度 | sensors-scrollbar-width |
| usePinchZoom | 跟踪指针事件以检测捏合缩放 | sensors-pinch-zoom |
UI 钩子允许您控制和订阅 UI 元素的状态变化。
| 主题 | 描述 | 参考 |
|---|---|---|
| useAudio | 播放音频并暴露其控制 | ui-audio |
| useClickAway | 当用户点击目标区域外部时触发回调 | ui-click-away |
| useCss | 动态调整 CSS | ui-css |
| useDrop | 跟踪文件、链接和复制粘贴的拖放 | ui-drop |
| useFullscreen | 全屏显示元素或视频 | ui-fullscreen |
| useSlider | 在任何 HTML 元素上提供滑动行为 | ui-slider |
| useSpeech | 从文本字符串合成语音 | ui-speech |
| useVibrate | 使用振动 API 提供物理反馈 | ui-vibrate |
| useVideo | 播放视频，跟踪其状态，并暴露播放控制 | ui-video |
动画钩子通常随时间插值数值。
| 主题 | 描述 | 参考 |
|---|---|---|
| useRaf | 在每个 requestAnimationFrame 上重新渲染组件 | animations-raf |
| useInterval | 在设定的时间间隔重新渲染组件 | animations-interval |
| useHarmonicIntervalFn | 谐波间隔函数 | animations-harmonic-interval |
| useSpring | 根据弹簧动力学随时间插值数字 | animations-spring |
| useTimeout | 超时后重新渲染组件 | animations-timeout |
| useTimeoutFn | 超时后调用给定函数 | animations-timeout-fn |
| useTween | 在将数字从 0 补间到 1 时重新渲染组件 | animations-tween |
| useUpdate | 返回一个回调，调用时重新渲染组件 | animations-update |
副作用钩子允许您的应用使用浏览器的 API 触发各种副作用。
| 主题 | 描述 | 参考 |
|---|---|---|
| useAsync | 解析异步函数 | side-effects-async |
| useAsyncFn | 可手动执行的异步函数 | side-effects-async-fn |
| useAsyncRetry | 具有重试能力的异步函数 | side-effects-async-retry |
| useBeforeUnload | 当用户尝试重新加载或关闭页面时显示浏览器警告 | side-effects-before-unload |
| useCookie | 提供读取、更新和删除 cookie 的方法 | side-effects-cookie |
| useCopyToClipboard | 将文本复制到剪贴板 | side-effects-copy-to-clipboard |
| useDebounce | 防抖函数 | side-effects-debounce |
| useError | 错误分发器 | side-effects-error |
| useFavicon | 设置页面的网站图标 | side-effects-favicon |
| useLocalStorage | 管理 localStorage 中的值 | side-effects-local-storage |
| useSessionStorage | 管理 sessionStorage 中的值 | side-effects-session-storage |
| useLockBodyScroll | 锁定 body 元素的滚动 | side-effects-lock-body-scroll |
| useRafLoop | 在 RAF 循环内调用给定函数 | side-effects-raf-loop |
| useThrottle | 节流函数 | side-effects-throttle |
| useThrottleFn | 节流函数变体 | side-effects-throttle-fn |
| useTitle | 设置页面标题 | side-effects-title |
| usePermission | 查询浏览器 API 的权限状态 | side-effects-permission |
生命周期钩子修改和扩展内置的 React 钩子或模仿 React 类组件的生命周期模式。
| 主题 | 描述 | 参考 |
|---|---|---|
| useEffectOnce | 修改后的 useEffect，只运行一次 | lifecycles-effect-once |
| useEvent | 订阅事件 | lifecycles-event |
| useLifecycles | 调用挂载和卸载回调 | lifecycles-lifecycles |
| useMountedState | 跟踪组件是否已挂载 | lifecycles-mounted-state |
| useUnmountPromise | 跟踪组件是否已挂载并支持 Promise | lifecycles-unmount-promise |
| usePromise | 仅在组件挂载时解析 Promise | lifecycles-promise |
| useLogger | 在组件经历生命周期时在控制台记录日志 | lifecycles-logger |
| useMount | 调用挂载回调 | lifecycles-mount |
| useUnmount | 调用卸载回调 | lifecycles-unmount |
| useUpdateEffect | 仅在更新时运行效果 | lifecycles-update-effect |
| useIsomorphicLayoutEffect | 在服务器端工作的 useLayoutEffect | lifecycles-isomorphic-layout-effect |
| useDeepCompareEffect | 具有深度比较的 useEffect | lifecycles-deep-compare-effect |
| useShallowCompareEffect | 具有浅层比较的 useEffect | lifecycles-shallow-compare-effect |
| useCustomCompareEffect | 具有自定义比较函数的 useEffect | lifecycles-custom-compare-effect |
状态钩子允许您轻松管理布尔值、数组和映射的状态。
| 主题 | 描述 | 参考 |
|---|---|---|
| createMemo | 记忆化钩子的工厂函数 | state-create-memo |
| createReducer | 带有自定义中间件的 reducer 钩子的工厂函数 | state-create-reducer |
| createReducerContext | 用于在组件之间共享状态的钩子的工厂函数 | state-create-reducer-context |
| createStateContext | 用于在组件之间共享状态的钩子的工厂函数 | state-create-state-context |
| createGlobalState | 跨组件共享状态 | state-create-global-state |
| useDefault | 当状态为 null 或 undefined 时返回默认值 | state-default |
| useGetSet | 返回状态获取器 get() 而不是原始状态 | state-get-set |
| useGetSetState | useGetSet 和 useSetState 的组合 | state-get-set-state |
| useLatest | 返回最新的状态或属性 | state-latest |
| usePrevious | 返回之前的状态或属性 | state-previous |
| usePreviousDistinct | 类似于 usePrevious，但带有谓词 | state-previous-distinct |
| useObservable | 跟踪 Observable 的最新值 | state-observable |
| useRafState | 创建仅在 requestAnimationFrame 后更新的 setState 方法 | state-raf-state |
| useSetState | 创建类似于 this.setState 的 setState 方法 | state-set-state |
| useToggle | 跟踪布尔值的状态 | state-toggle |
| useCounter | 跟踪数字的状态 | state-counter |
| useList | 跟踪数组的状态 | state-list |
| useMap | 跟踪对象的状态 | state-map |
| useSet | 跟踪 Set 的状态 | state-set |
| useQueue | 实现简单队列 | state-queue |
| useStateList | 循环遍历数组 | state-state-list |
| useStateValidator | 使用验证器函数验证状态 | state-state-validator |
| useStateWithHistory | 存储先前的状态值并提供遍历它们的句柄 | state-state-with-history |
| useMultiStateValidator | 类似于 useStateValidator，但跟踪多个状态 | state-multi-state-validator |
| useMediatedState | 类似于常规 useState，但通过自定义函数进行调解 | state-mediated-state |
| useFirstMountState | 检查当前渲染是否为首次 | state-first-mount-state |
| useRendersCount | 计算组件渲染次数 | state-renders-count |
| useMethods | useReducer 的简洁替代方案 | state-methods |
| 主题 | 描述 | 参考 |
|---|---|---|
| useEnsuredForwardedRef | 安全地使用 React.forwardedRef | misc-ensured-forwarded-ref |
每周安装量
570
仓库
GitHub 星标
6
首次出现
2026年1月29日
安全审计
安装于
cursor568
claude-code533
trae457
opencode58
gemini-cli58
github-copilot58
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.
| Topic | Description | Reference |
|---|---|---|
| Usage | Import patterns and tree-shaking recommendations | core-usage |
Sensor hooks listen to changes in browser APIs and device interfaces, forcing components to re-render with updated state.
| Topic | Description | Reference |
|---|---|---|
| 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 hooks allow you to control and subscribe to state changes of UI elements.
| Topic | Description | Reference |
|---|---|---|
| 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 |
Animation hooks usually interpolate numeric values over time.
| Topic | Description | Reference |
|---|---|---|
| useRaf | Re-renders component on each requestAnimationFrame | animations-raf |
| useInterval | Re-renders component on a set interval | animations-interval |
| useHarmonicIntervalFn | Harmonic interval function | animations-harmonic-interval |
| useSpring | Interpolates number over time according to spring dynamics | animations-spring |
| useTimeout | Re-renders component after a timeout | animations-timeout |
| useTimeoutFn | Calls given function after a timeout |
Side-effect hooks allow your app to trigger various side-effects using browser's API.
| Topic | Description | Reference |
|---|---|---|
| useAsync | Resolves an async function | side-effects-async |
| useAsyncFn | Async function with manual execution | side-effects-async-fn |
| useAsyncRetry | Async function with retry capability | side-effects-async-retry |
| useBeforeUnload | Shows browser alert when user tries to reload or close the page | side-effects-before-unload |
| useCookie | Provides way to read, update and delete a cookie | side-effects-cookie |
| useCopyToClipboard | Copies text to clipboard |
Lifecycle hooks modify and extend built-in React hooks or imitate React Class component lifecycle patterns.
| Topic | Description | Reference |
|---|---|---|
| useEffectOnce | Modified useEffect that only runs once | lifecycles-effect-once |
| useEvent | Subscribe to events | lifecycles-event |
| useLifecycles | Calls mount and unmount callbacks | lifecycles-lifecycles |
| useMountedState | Tracks if component is mounted | lifecycles-mounted-state |
| useUnmountPromise | Track if component is mounted with promise support | lifecycles-unmount-promise |
| usePromise | Resolves promise only while component is mounted |
State hooks allow you to easily manage state of booleans, arrays, and maps.
| Topic | Description | Reference |
|---|---|---|
| createMemo | Factory of memoized hooks | state-create-memo |
| createReducer | Factory of reducer hooks with custom middleware | state-create-reducer |
| createReducerContext | Factory of hooks for sharing state between components | state-create-reducer-context |
| createStateContext | Factory of hooks for sharing state between components | state-create-state-context |
| createGlobalState | Cross component shared state | state-create-global-state |
| useDefault |
| Topic | Description | Reference |
|---|---|---|
| useEnsuredForwardedRef | Use a React.forwardedRef safely | misc-ensured-forwarded-ref |
Weekly Installs
570
Repository
GitHub Stars
6
First Seen
Jan 29, 2026
Security Audits
Gen Agent Trust HubPassSocketPassSnykWarn
Installed on
cursor568
claude-code533
trae457
opencode58
gemini-cli58
github-copilot58
React 组合模式指南：Vercel 组件架构最佳实践，提升代码可维护性
103,800 周安装
OpenAPI 转 TypeScript 工具 - 自动生成 API 接口与类型守卫
563 周安装
数据库模式设计器 - 内置最佳实践，自动生成生产级SQL/NoSQL数据库架构
564 周安装
Rust Unsafe代码检查器 - 安全使用Unsafe Rust的完整指南与最佳实践
564 周安装
.NET并发编程模式指南：async/await、Channels、Akka.NET选择决策树
565 周安装
韩语语法检查器 - 基于国立国语院标准的拼写、空格、语法、标点错误检测与纠正
565 周安装
技能安全扫描器 - 检测Claude技能安全漏洞，防范提示注入与恶意代码
565 周安装
| 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-timeout-fn |
| useTween | Re-renders component while tweening a number from 0 to 1 | animations-tween |
| useUpdate | Returns a callback which re-renders component when called | animations-update |
| side-effects-copy-to-clipboard |
| useDebounce | Debounces a function | side-effects-debounce |
| useError | Error dispatcher | side-effects-error |
| useFavicon | Sets favicon of the page | side-effects-favicon |
| useLocalStorage | Manages a value in localStorage | side-effects-local-storage |
| useSessionStorage | Manages a value in sessionStorage | side-effects-session-storage |
| useLockBodyScroll | Locks scrolling of the body element | side-effects-lock-body-scroll |
| useRafLoop | Calls given function inside the RAF loop | side-effects-raf-loop |
| useThrottle | Throttles a function | side-effects-throttle |
| useThrottleFn | Throttle function variant | side-effects-throttle-fn |
| useTitle | Sets title of the page | side-effects-title |
| usePermission | Query permission status for browser APIs | side-effects-permission |
| lifecycles-promise |
| useLogger | Logs in console as component goes through life-cycles | lifecycles-logger |
| useMount | Calls mount callbacks | lifecycles-mount |
| useUnmount | Calls unmount callbacks | lifecycles-unmount |
| useUpdateEffect | Run an effect only on updates | lifecycles-update-effect |
| useIsomorphicLayoutEffect | useLayoutEffect that works on server | lifecycles-isomorphic-layout-effect |
| useDeepCompareEffect | useEffect with deep comparison | lifecycles-deep-compare-effect |
| useShallowCompareEffect | useEffect with shallow comparison | lifecycles-shallow-compare-effect |
| useCustomCompareEffect | useEffect with custom comparison function | lifecycles-custom-compare-effect |
| Returns the default value when state is null or undefined |
| state-default |
| useGetSet | Returns state getter get() instead of raw state | state-get-set |
| useGetSetState | Combination of useGetSet and useSetState | state-get-set-state |
| useLatest | Returns the latest state or props | state-latest |
| usePrevious | Returns the previous state or props | state-previous |
| usePreviousDistinct | Like usePrevious but with a predicate | state-previous-distinct |
| useObservable | Tracks latest value of an Observable | state-observable |
| useRafState | Creates setState method which only updates after requestAnimationFrame | state-raf-state |
| useSetState | Creates setState method which works like this.setState | state-set-state |
| useToggle | Tracks state of a boolean | state-toggle |
| useCounter | Tracks state of a number | state-counter |
| useList | Tracks state of an array | state-list |
| useMap | Tracks state of an object | state-map |
| useSet | Tracks state of a Set | state-set |
| useQueue | Implements simple queue | state-queue |
| useStateList | Circularly iterates over an array | state-state-list |
| useStateValidator | Validates state with a validator function | state-state-validator |
| useStateWithHistory | Stores previous state values and provides handles to travel through them | state-state-with-history |
| useMultiStateValidator | Alike useStateValidator but tracks multiple states | state-multi-state-validator |
| useMediatedState | Like regular useState but with mediation by custom function | state-mediated-state |
| useFirstMountState | Check if current render is first | state-first-mount-state |
| useRendersCount | Count component renders | state-renders-count |
| useMethods | Neat alternative to useReducer | state-methods |
