👍
react-use

^{基本React Hooks集合。
移植自 libreact。

翻译：🇨🇳 汉语}

npm i react-use

- [**传感器**](./docs/Sensors.md) - [`useBattery`](./docs/useBattery.md) — 跟踪设备电池状态。[![][img-demo]](https://codesandbox.io/s/qlvn662zww) - [`useGeolocation`](./docs/useGeolocation.md) — 跟踪用户设备的地理位置状态。[![][img-demo]](https://streamich.github.io/react-use/?path=/story/sensors-usegeolocation--demo) - [`useHover` 和 `useHoverDirty`](./docs/useHover.md) — 跟踪某个元素的鼠标悬停状态。[![][img-demo]](https://codesandbox.io/s/zpn583rvx) - [`useHash`](./docs/useHash.md) — 跟踪位置哈希值。[![][img-demo]](https://streamich.github.io/react-use/?path=/story/sensors-usehash--demo) - [`useIdle`](./docs/useIdle.md) — 跟踪用户是否处于非活动状态。 - [`useIntersection`](./docs/useIntersection.md) — 跟踪HTML元素的交叉状态。[![][img-demo]](https://streamich.github.io/react-use/?path=/story/sensors-useintersection--demo) - [`useKey`](./docs/useKey.md), [`useKeyPress`](./docs/useKeyPress.md), [`useKeyboardJs`](./docs/useKeyboardJs.md), 和 [`useKeyPressEvent`](./docs/useKeyPressEvent.md) — 跟踪按键。[![][img-demo]](https://streamich.github.io/react-use/?path=/story/sensors-usekeypressevent--demo) - [`useLocation`](./docs/useLocation.md) 和 [`useSearchParam`](./docs/useSearchParam.md) — 跟踪页面导航栏位置状态。 - [`useLongPress`](./docs/useLongPress.md) — 跟踪某个元素的长按手势。 - [`useMedia`](./docs/useMedia.md) — 跟踪CSS媒体查询的状态。[![][img-demo]](https://streamich.github.io/react-use/?path=/story/sensors-usemedia--demo) - [`useMediaDevices`](./docs/useMediaDevices.md) — 跟踪已连接硬件设备的状态。 - [`useMotion`](./docs/useMotion.md) — 跟踪设备运动传感器的状态。 - [`useMouse` 和 `useMouseHovered`](./docs/useMouse.md) — 跟踪鼠标位置的状态。[![][img-demo]](https://streamich.github.io/react-use/?path=/story/sensors-usemouse--docs) - [`useMouseWheel`](./docs/useMouseWheel.md) — 跟踪滚动鼠标滚轮的deltaY。[![][img-demo]](https://streamich.github.io/react-use/?path=/story/sensors-usemousewheel--docs) - [`useNetworkState`](./docs/useNetworkState.md) — 跟踪浏览器网络连接的状态。[![][img-demo]](https://streamich.github.io/react-use/?path=/story/sensors-usenetworkstate--demo) - [`useOrientation`](./docs/useOrientation.md) — 跟踪设备屏幕方向的状态。 - [`usePageLeave`](./docs/usePageLeave.md) — 当鼠标离开页面边界时触发。 - [`useScratch`](./docs/useScratch.md) — 跟踪鼠标点击并拖动的状态。 - [`useScroll`](./docs/useScroll.md) — 跟踪HTML元素的滚动位置。[![][img-demo]](https://streamich.github.io/react-use/?path=/story/sensors-usescroll--docs) - [`useScrolling`](./docs/useScrolling.md) — 跟踪HTML元素是否正在滚动。 - [`useStartTyping`](./docs/useStartTyping.md) — 检测用户何时开始输入。 - [`useWindowScroll`](./docs/useWindowScroll.md) — 跟踪`Window`滚动位置。[![][img-demo]](https://streamich.github.io/react-use/?path=/story/sensors-usewindowscroll--docs) - [`useWindowSize`](./docs/useWindowSize.md) — 跟踪`Window`尺寸。[![][img-demo]](https://codesandbox.io/s/m7ln22668) - [`useMeasure`](./docs/useMeasure.md) 和 [`useSize`](./docs/useSize.md) — 跟踪HTML元素的尺寸。[![][img-demo]](https://streamich.github.io/react-use/?path=/story/sensors-usemeasure--demo) - [`createBreakpoint`](./docs/createBreakpoint.md) — 跟踪`innerWidth` - [`useScrollbarWidth`](./docs/useScrollbarWidth.md) — 检测浏览器原生滚动条的宽度。[![][img-demo]](https://streamich.github.io/react-use/?path=/story/sensors-usescrollbarwidth--demo) - [`usePinchZoom`](./docs/usePinchZoom.md) — 跟踪指针事件以检测捏合缩放的状态。[![][img-demo]](https://streamich.github.io/react-use/?path=/story/sensors-usePinchZoom--demo)

- [**UI**](./docs/UI.md) - [`useAudio`](./docs/useAudio.md) — 播放音频并公开其控制。[![][img-demo]](https://codesandbox.io/s/2o4lo6rqy) - [`useClickAway`](./docs/useClickAway.md) — 当用户点击目标区域外时触发回调。 - [`useCss`](./docs/useCss.md) — 动态调整CSS。 - [`useDrop` 和 `useDropArea`](./docs/useDrop.md) — 跟踪文件、链接和复制粘贴的拖放。 - [`useFullscreen`](./docs/useFullscreen.md) — 全屏显示元素或视频。[![][img-demo]](https://streamich.github.io/react-use/?path=/story/ui-usefullscreen--demo) - [`useSlider`](./docs/useSlider.md) — 为任何HTML元素提供滑动行为。[![][img-demo]](https://streamich.github.io/react-use/?path=/story/ui-useslider--demo) - [`useSpeech`](./docs/useSpeech.md) — 从文本字符串合成语音。[![][img-demo]](https://codesandbox.io/s/n090mqz69m) - [`useVibrate`](./docs/useVibrate.md) — 使用[振动API](https://developer.mozilla.org/en-US/docs/Web/API/Vibration_API)提供物理反馈。[![][img-demo]](https://streamich.github.io/react-use/?path=/story/ui-usevibrate--demo) - [`useVideo`](./docs/useVideo.md) — 播放视频，跟踪其状态，并公开播放控制。[![][img-demo]](https://streamich.github.io/react-use/?path=/story/ui-usevideo--demo)

- [**动画**](./docs/Animations.md) - [`useRaf`](./docs/useRaf.md) — 在每个`requestAnimationFrame`上重新渲染组件。 - [`useInterval`](./docs/useInterval.md) 和 [`useHarmonicIntervalFn`](./docs/useHarmonicIntervalFn.md) — 使用`setInterval`在设定的时间间隔内重新渲染组件。 - [`useSpring`](./docs/useSpring.md) — 根据弹簧动力学随时间插值数字。 - [`useTimeout`](./docs/useTimeout.md) — 在超时后重新渲染组件。 - [`useTimeoutFn`](./docs/useTimeoutFn.md) — 在超时后调用给定的函数。[![][img-demo]](https://streamich.github.io/react-use/?path=/story/animation-usetimeoutfn--demo) - [`useTween`](./docs/useTween.md) — 重新渲染组件，同时将数字从0过渡到1。[![][img-demo]](https://codesandbox.io/s/52990wwzyl) - [`useUpdate`](./docs/useUpdate.md) — 返回一个回调，调用时重新渲染组件。

- [**副作用**](./docs/Side-effects.md) - [`useAsync`](./docs/useAsync.md), [`useAsyncFn`](./docs/useAsyncFn.md), 和 [`useAsyncRetry`](./docs/useAsyncRetry.md) — 解析`async`函数。 - [`useBeforeUnload`](./docs/useBeforeUnload.md) — 当用户尝试重新加载或关闭页面时显示浏览器警告。 - [`useCookie`](./docs/useCookie.md) — 提供读取、更新和删除cookie的方法。[![][img-demo]](https://streamich.github.io/react-use/?path=/story/side-effects-usecookie--demo) - [`useCopyToClipboard`](./docs/useCopyToClipboard.md) — 将文本复制到剪贴板。 - [`useDebounce`](./docs/useDebounce.md) — 防抖函数。[![][img-demo]](https://streamich.github.io/react-use/?path=/story/side-effects-usedebounce--demo) - [`useError`](./docs/useError.md) — 错误分发器。[![][img-demo]](https://streamich.github.io/react-use/?path=/story/side-effects-useerror--demo) - [`useFavicon`](./docs/useFavicon.md) — 设置页面的favicon。 - [`useLocalStorage`](./docs/useLocalStorage.md) — 管理`localStorage`中的值。 - [`useLockBodyScroll`](./docs/useLockBodyScroll.md) — 锁定body元素的滚动。 - [`useRafLoop`](./docs/useRafLoop.md) — 在RAF循环内调用给定的函数。 - [`useSessionStorage`](./docs/useSessionStorage.md) — 管理`sessionStorage`中的值。 - [`useThrottle` 和 `useThrottleFn`](./docs/useThrottle.md) — 节流函数。[![][img-demo]](https://streamich.github.io/react-use/?path=/story/side-effects-usethrottle--demo) - [`useTitle`](./docs/useTitle.md) — 设置页面的标题。 - [`usePermission`](./docs/usePermission.md) — 查询浏览器API的权限状态。

- [**生命周期**](./docs/Lifecycles.md) - [`useEffectOnce`](./docs/useEffectOnce.md) — 修改版的[`useEffect`](https://reactjs.org/docs/hooks-reference.html#useeffect)钩子，只运行一次。 - [`useEvent`](./docs/useEvent.md) — 订阅事件。 - [`useLifecycles`](./docs/useLifecycles.md) — 调用`mount`和`unmount`回调。 - [`useMountedState`](./docs/useMountedState.md) 和 [`useUnmountPromise`](./docs/useUnmountPromise.md) — 跟踪组件是否已挂载。 - [`usePromise`](./docs/usePromise.md) — 仅在组件挂载时解析promise。 - [`useLogger`](./docs/useLogger.md) — 在组件经历生命周期时在控制台记录日志。 - [`useMount`](./docs/useMount.md) — 调用`mount`回调。 - [`useUnmount`](./docs/useUnmount.md) — 调用`unmount`回调。 - [`useUpdateEffect`](./docs/useUpdateEffect.md) — 仅在更新时运行`effect`。 - [`useIsomorphicLayoutEffect`](./docs/useIsomorphicLayoutEffect.md) — 可在服务器上工作的`useLayoutEffect`。 - [`useDeepCompareEffect`](./docs/useDeepCompareEffect.md), [`useShallowCompareEffect`](./docs/useShallowCompareEffect.md), 和 [`useCustomCompareEffect`](./docs/useCustomCompareEffect.md)

- [**状态**](./docs/State.md) - [`createMemo`](./docs/createMemo.md) — 记忆化钩子的工厂函数。 - [`createReducer`](./docs/createReducer.md) — 带有自定义中间件的reducer钩子工厂函数。 - [`createReducerContext`](./docs/createReducerContext.md) 和 [`createStateContext`](./docs/createStateContext.md) — 用于在组件之间共享状态的钩子工厂函数。 - [`useDefault`](./docs/useDefault.md) — 当状态为`null`或`undefined`时返回默认值。 - [`useGetSet`](./docs/useGetSet.md) — 返回状态getter ` - [`useRafState`](./docs/useRafState.md) — 创建一个仅在 `requestAnimationFrame` 后更新的 `setState` 方法。[![][img-demo]](https://streamich.github.io/react-use/?path=/story/state-userafstate--demo) - [`useSetState`](./docs/useSetState.md) — 创建一个类似 `this.setState` 工作方式的 `setState` 方法。[![][img-demo]](https://codesandbox.io/s/n75zqn1xp0) - [`useStateList`](./docs/useStateList.md) — 循环遍历数组。[![][img-demo]](https://codesandbox.io/s/bold-dewdney-pjzkd) - [`useToggle` 和 `useBoolean`](./docs/useToggle.md) — 跟踪布尔值的状态。[![][img-demo]](https://codesandbox.io/s/focused-sammet-brw2d) - [`useCounter` 和 `useNumber`](./docs/useCounter.md) — 跟踪数字的状态。[![][img-demo]](https://streamich.github.io/react-use/?path=/story/state-usecounter--demo) - [`useList`](./docs/useList.md) ~和 [`useUpsert`](./docs/useUpsert.md)~ — 跟踪数组的状态。[![][img-demo]](https://codesandbox.io/s/wonderful-mahavira-1sm0w) - [`useMap`](./docs/useMap.md) — 跟踪对象的状态。[![][img-demo]](https://codesandbox.io/s/quirky-dewdney-gi161) - [`useSet`](./docs/useSet.md) — 跟踪 Set 的状态。[![][img-demo]](https://codesandbox.io/s/bold-shtern-6jlgw) - [`useQueue`](./docs/useQueue.md) — 实现简单队列。 - [`useStateValidator`](./docs/useStateValidator.md) — 跟踪对象的状态。[![][img-demo]](https://streamich.github.io/react-use/?path=/story/state-usestatevalidator--demo) - [`useStateWithHistory`](./docs/useStateWithHistory.md) — 存储先前的状态值并提供遍历它们的处理方法。[![][img-demo]](https://streamich.github.io/react-use/?path=/story/state-usestatewithhistory--demo) - [`useMultiStateValidator`](./docs/useMultiStateValidator.md) — 类似于 `useStateValidator`，但同时跟踪多个状态。[![][img-demo]](https://streamich.github.io/react-use/?path=/story/state-usemultistatevalidator--demo) - [`useMediatedState`](./docs/useMediatedState.md) — 类似于常规的 `useState`，但通过自定义函数进行中介。[![][img-demo]](https://streamich.github.io/react-use/?path=/story/state-usemediatedstate--demo) - [`useFirstMountState`](./docs/useFirstMountState.md) — 检查当前渲染是否是首次渲染。[![][img-demo]](https://streamich.github.io/react-use/?path=/story/state-usefirstmountstate--demo) - [`useRendersCount`](./docs/useRendersCount.md) — 计算组件渲染次数。[![][img-demo]](https://streamich.github.io/react-use/?path=/story/state-userenderscount--demo) - [`createGlobalState`](./docs/createGlobalState.md) — 跨组件共享状态。[![][img-demo]](https://streamich.github.io/react-use/?path=/story/state-createglobalstate--demo) - [`useMethods`](./docs/useMethods.md) — `useReducer` 的简洁替代方案。[![][img-demo]](https://streamich.github.io/react-use/?path=/story/state-usemethods--demo)

- [**杂项**]() - [`useEnsuredForwardedRef`](./docs/useEnsuredForwardedRef.md) 和 [`ensuredForwardRef`](./docs/useEnsuredForwardedRef.md) — 安全地使用 React.forwardedRef。[![][img-demo]](https://streamich.github.io/react-use/?path=/story/state-useensuredforwardedref--demo)

使用方法 — 如何导入。
无版权许可 — 公共领域。
支持 — 将自己添加到下方的支持者列表中。

react-use

👍 react-use

贡献者

👍
react-use