react-use

<div align="center"> <h1> <br/> <br/> 👍 <br /> react-use <br /> <br /> <br /> <br /> </h1> ^{<br /> <br /> <a href="https://www.npmjs.com/package/react-use"> <img src="https://yellow-cdn.veclightyear.com/2b54e442/b226d7c3-cd61-42bd-bfab-789104bba93b.svg" alt="npm包" /> </a> <a href="https://circleci.com/gh/streamich/react-use"> <img src="https://yellow-cdn.veclightyear.com/2b54e442/65537f37-146f-478f-a8c9-3e7d9e4b3457.svg" alt="CircleCI主分支" /> </a> <a href="https://www.npmjs.com/package/react-use"> <img src="https://yellow-cdn.veclightyear.com/2b54e442/5812b814-939c-4afe-a34c-1ccc1e383603.svg" alt="npm下载量" /> </a> <a href="http://streamich.github.io/react-use"> <img src="https://yellow-cdn.veclightyear.com/2b54e442/09e691e2-d234-4382-b518-1570f1bab6a4.svg" alt="演示" /> </a> <br /> 基本<a href="https://reactjs.org/docs/hooks-intro.html">React Hooks</a>集合。</em> <em>移植自</em> <a href="https://github.com/streamich/libreact"><code>libreact</code></a>。 <br /> 翻译：<a href="https://github.com/zenghongtu/react-use-chinese/blob/master/README.md">🇨🇳 汉语</a>} <br /> <br /> <br /> <br /> <pre>npm i <a href="https://www.npmjs.com/package/react-use">react-use</a></pre> <br /> <br /> <br /> <br /> <br /> </div> - [**传感器**](./docs/Sensors.md) - [`useBattery`](./docs/useBattery.md) &mdash; 跟踪设备电池状态。[![][img-demo]](https://codesandbox.io/s/qlvn662zww) - [`useGeolocation`](./docs/useGeolocation.md) &mdash; 跟踪用户设备的地理位置状态。[![][img-demo]](https://streamich.github.io/react-use/?path=/story/sensors-usegeolocation--demo) - [`useHover` 和 `useHoverDirty`](./docs/useHover.md) &mdash; 跟踪某个元素的鼠标悬停状态。[![][img-demo]](https://codesandbox.io/s/zpn583rvx) - [`useHash`](./docs/useHash.md) &mdash; 跟踪位置哈希值。[![][img-demo]](https://streamich.github.io/react-use/?path=/story/sensors-usehash--demo) - [`useIdle`](./docs/useIdle.md) &mdash; 跟踪用户是否处于非活动状态。 - [`useIntersection`](./docs/useIntersection.md) &mdash; 跟踪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) &mdash; 跟踪按键。[![][img-demo]](https://streamich.github.io/react-use/?path=/story/sensors-usekeypressevent--demo) - [`useLocation`](./docs/useLocation.md) 和 [`useSearchParam`](./docs/useSearchParam.md) &mdash; 跟踪页面导航栏位置状态。 - [`useLongPress`](./docs/useLongPress.md) &mdash; 跟踪某个元素的长按手势。 - [`useMedia`](./docs/useMedia.md) &mdash; 跟踪CSS媒体查询的状态。[![][img-demo]](https://streamich.github.io/react-use/?path=/story/sensors-usemedia--demo) - [`useMediaDevices`](./docs/useMediaDevices.md) &mdash; 跟踪已连接硬件设备的状态。 - [`useMotion`](./docs/useMotion.md) &mdash; 跟踪设备运动传感器的状态。 - [`useMouse` 和 `useMouseHovered`](./docs/useMouse.md) &mdash; 跟踪鼠标位置的状态。[![][img-demo]](https://streamich.github.io/react-use/?path=/story/sensors-usemouse--docs) - [`useMouseWheel`](./docs/useMouseWheel.md) &mdash; 跟踪滚动鼠标滚轮的deltaY。[![][img-demo]](https://streamich.github.io/react-use/?path=/story/sensors-usemousewheel--docs) - [`useNetworkState`](./docs/useNetworkState.md) &mdash; 跟踪浏览器网络连接的状态。[![][img-demo]](https://streamich.github.io/react-use/?path=/story/sensors-usenetworkstate--demo) - [`useOrientation`](./docs/useOrientation.md) &mdash; 跟踪设备屏幕方向的状态。 - [`usePageLeave`](./docs/usePageLeave.md) &mdash; 当鼠标离开页面边界时触发。 - [`useScratch`](./docs/useScratch.md) &mdash; 跟踪鼠标点击并拖动的状态。 - [`useScroll`](./docs/useScroll.md) &mdash; 跟踪HTML元素的滚动位置。[![][img-demo]](https://streamich.github.io/react-use/?path=/story/sensors-usescroll--docs) - [`useScrolling`](./docs/useScrolling.md) &mdash; 跟踪HTML元素是否正在滚动。 - [`useStartTyping`](./docs/useStartTyping.md) &mdash; 检测用户何时开始输入。 - [`useWindowScroll`](./docs/useWindowScroll.md) &mdash; 跟踪`Window`滚动位置。[![][img-demo]](https://streamich.github.io/react-use/?path=/story/sensors-usewindowscroll--docs) - [`useWindowSize`](./docs/useWindowSize.md) &mdash; 跟踪`Window`尺寸。[![][img-demo]](https://codesandbox.io/s/m7ln22668) - [`useMeasure`](./docs/useMeasure.md) 和 [`useSize`](./docs/useSize.md) &mdash; 跟踪HTML元素的尺寸。[![][img-demo]](https://streamich.github.io/react-use/?path=/story/sensors-usemeasure--demo) - [`createBreakpoint`](./docs/createBreakpoint.md) &mdash; 跟踪`innerWidth` - [`useScrollbarWidth`](./docs/useScrollbarWidth.md) &mdash; 检测浏览器原生滚动条的宽度。[![][img-demo]](https://streamich.github.io/react-use/?path=/story/sensors-usescrollbarwidth--demo) - [`usePinchZoom`](./docs/usePinchZoom.md) &mdash; 跟踪指针事件以检测捏合缩放的状态。[![][img-demo]](https://streamich.github.io/react-use/?path=/story/sensors-usePinchZoom--demo) <br/> <br/> - [**UI**](./docs/UI.md) - [`useAudio`](./docs/useAudio.md) &mdash; 播放音频并公开其控制。[![][img-demo]](https://codesandbox.io/s/2o4lo6rqy) - [`useClickAway`](./docs/useClickAway.md) &mdash; 当用户点击目标区域外时触发回调。 - [`useCss`](./docs/useCss.md) &mdash; 动态调整CSS。 - [`useDrop` 和 `useDropArea`](./docs/useDrop.md) &mdash; 跟踪文件、链接和复制粘贴的拖放。 - [`useFullscreen`](./docs/useFullscreen.md) &mdash; 全屏显示元素或视频。[![][img-demo]](https://streamich.github.io/react-use/?path=/story/ui-usefullscreen--demo) - [`useSlider`](./docs/useSlider.md) &mdash; 为任何HTML元素提供滑动行为。[![][img-demo]](https://streamich.github.io/react-use/?path=/story/ui-useslider--demo) - [`useSpeech`](./docs/useSpeech.md) &mdash; 从文本字符串合成语音。[![][img-demo]](https://codesandbox.io/s/n090mqz69m) - [`useVibrate`](./docs/useVibrate.md) &mdash; 使用[振动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) &mdash; 播放视频，跟踪其状态，并公开播放控制。[![][img-demo]](https://streamich.github.io/react-use/?path=/story/ui-usevideo--demo) <br/> <br/> - [**动画**](./docs/Animations.md) - [`useRaf`](./docs/useRaf.md) &mdash; 在每个`requestAnimationFrame`上重新渲染组件。 - [`useInterval`](./docs/useInterval.md) 和 [`useHarmonicIntervalFn`](./docs/useHarmonicIntervalFn.md) &mdash; 使用`setInterval`在设定的时间间隔内重新渲染组件。 - [`useSpring`](./docs/useSpring.md) &mdash; 根据弹簧动力学随时间插值数字。 - [`useTimeout`](./docs/useTimeout.md) &mdash; 在超时后重新渲染组件。 - [`useTimeoutFn`](./docs/useTimeoutFn.md) &mdash; 在超时后调用给定的函数。[![][img-demo]](https://streamich.github.io/react-use/?path=/story/animation-usetimeoutfn--demo) - [`useTween`](./docs/useTween.md) &mdash; 重新渲染组件，同时将数字从0过渡到1。[![][img-demo]](https://codesandbox.io/s/52990wwzyl) - [`useUpdate`](./docs/useUpdate.md) &mdash; 返回一个回调，调用时重新渲染组件。 <br/> <br/> - [**副作用**](./docs/Side-effects.md) - [`useAsync`](./docs/useAsync.md), [`useAsyncFn`](./docs/useAsyncFn.md), 和 [`useAsyncRetry`](./docs/useAsyncRetry.md) &mdash; 解析`async`函数。 - [`useBeforeUnload`](./docs/useBeforeUnload.md) &mdash; 当用户尝试重新加载或关闭页面时显示浏览器警告。 - [`useCookie`](./docs/useCookie.md) &mdash; 提供读取、更新和删除cookie的方法。[![][img-demo]](https://streamich.github.io/react-use/?path=/story/side-effects-usecookie--demo) - [`useCopyToClipboard`](./docs/useCopyToClipboard.md) &mdash; 将文本复制到剪贴板。 - [`useDebounce`](./docs/useDebounce.md) &mdash; 防抖函数。[![][img-demo]](https://streamich.github.io/react-use/?path=/story/side-effects-usedebounce--demo) - [`useError`](./docs/useError.md) &mdash; 错误分发器。[![][img-demo]](https://streamich.github.io/react-use/?path=/story/side-effects-useerror--demo) - [`useFavicon`](./docs/useFavicon.md) &mdash; 设置页面的favicon。 - [`useLocalStorage`](./docs/useLocalStorage.md) &mdash; 管理`localStorage`中的值。 - [`useLockBodyScroll`](./docs/useLockBodyScroll.md) &mdash; 锁定body元素的滚动。 - [`useRafLoop`](./docs/useRafLoop.md) &mdash; 在RAF循环内调用给定的函数。 - [`useSessionStorage`](./docs/useSessionStorage.md) &mdash; 管理`sessionStorage`中的值。 - [`useThrottle` 和 `useThrottleFn`](./docs/useThrottle.md) &mdash; 节流函数。[![][img-demo]](https://streamich.github.io/react-use/?path=/story/side-effects-usethrottle--demo) - [`useTitle`](./docs/useTitle.md) &mdash; 设置页面的标题。 - [`usePermission`](./docs/usePermission.md) &mdash; 查询浏览器API的权限状态。 <br/> <br/> - [**生命周期**](./docs/Lifecycles.md) - [`useEffectOnce`](./docs/useEffectOnce.md) &mdash; 修改版的[`useEffect`](https://reactjs.org/docs/hooks-reference.html#useeffect)钩子，只运行一次。 - [`useEvent`](./docs/useEvent.md) &mdash; 订阅事件。 - [`useLifecycles`](./docs/useLifecycles.md) &mdash; 调用`mount`和`unmount`回调。 - [`useMountedState`](./docs/useMountedState.md) 和 [`useUnmountPromise`](./docs/useUnmountPromise.md) &mdash; 跟踪组件是否已挂载。 - [`usePromise`](./docs/usePromise.md) &mdash; 仅在组件挂载时解析promise。 - [`useLogger`](./docs/useLogger.md) &mdash; 在组件经历生命周期时在控制台记录日志。 - [`useMount`](./docs/useMount.md) &mdash; 调用`mount`回调。 - [`useUnmount`](./docs/useUnmount.md) &mdash; 调用`unmount`回调。 - [`useUpdateEffect`](./docs/useUpdateEffect.md) &mdash; 仅在更新时运行`effect`。 - [`useIsomorphicLayoutEffect`](./docs/useIsomorphicLayoutEffect.md) &mdash; 可在服务器上工作的`useLayoutEffect`。 - [`useDeepCompareEffect`](./docs/useDeepCompareEffect.md), [`useShallowCompareEffect`](./docs/useShallowCompareEffect.md), 和 [`useCustomCompareEffect`](./docs/useCustomCompareEffect.md) <br/> <br/> - [**状态**](./docs/State.md) - [`createMemo`](./docs/createMemo.md) &mdash; 记忆化钩子的工厂函数。 - [`createReducer`](./docs/createReducer.md) &mdash; 带有自定义中间件的reducer钩子工厂函数。 - [`createReducerContext`](./docs/createReducerContext.md) 和 [`createStateContext`](./docs/createStateContext.md) &mdash; 用于在组件之间共享状态的钩子工厂函数。 - [`useDefault`](./docs/useDefault.md) &mdash; 当状态为`null`或`undefined`时返回默认值。 - [`useGetSet`](./docs/useGetSet.md) &mdash; 返回状态getter ` - [`useRafState`](./docs/useRafState.md) &mdash; 创建一个仅在 `requestAnimationFrame` 后更新的 `setState` 方法。[![][img-demo]](https://streamich.github.io/react-use/?path=/story/state-userafstate--demo) - [`useSetState`](./docs/useSetState.md) &mdash; 创建一个类似 `this.setState` 工作方式的 `setState` 方法。[![][img-demo]](https://codesandbox.io/s/n75zqn1xp0) - [`useStateList`](./docs/useStateList.md) &mdash; 循环遍历数组。[![][img-demo]](https://codesandbox.io/s/bold-dewdney-pjzkd) - [`useToggle` 和 `useBoolean`](./docs/useToggle.md) &mdash; 跟踪布尔值的状态。[![][img-demo]](https://codesandbox.io/s/focused-sammet-brw2d) - [`useCounter` 和 `useNumber`](./docs/useCounter.md) &mdash; 跟踪数字的状态。[![][img-demo]](https://streamich.github.io/react-use/?path=/story/state-usecounter--demo) - [`useList`](./docs/useList.md) ~和 [`useUpsert`](./docs/useUpsert.md)~ &mdash; 跟踪数组的状态。[![][img-demo]](https://codesandbox.io/s/wonderful-mahavira-1sm0w) - [`useMap`](./docs/useMap.md) &mdash; 跟踪对象的状态。[![][img-demo]](https://codesandbox.io/s/quirky-dewdney-gi161) - [`useSet`](./docs/useSet.md) &mdash; 跟踪 Set 的状态。[![][img-demo]](https://codesandbox.io/s/bold-shtern-6jlgw) - [`useQueue`](./docs/useQueue.md) &mdash; 实现简单队列。 - [`useStateValidator`](./docs/useStateValidator.md) &mdash; 跟踪对象的状态。[![][img-demo]](https://streamich.github.io/react-use/?path=/story/state-usestatevalidator--demo) - [`useStateWithHistory`](./docs/useStateWithHistory.md) &mdash; 存储先前的状态值并提供遍历它们的处理方法。[![][img-demo]](https://streamich.github.io/react-use/?path=/story/state-usestatewithhistory--demo) - [`useMultiStateValidator`](./docs/useMultiStateValidator.md) &mdash; 类似于 `useStateValidator`，但同时跟踪多个状态。[![][img-demo]](https://streamich.github.io/react-use/?path=/story/state-usemultistatevalidator--demo) - [`useMediatedState`](./docs/useMediatedState.md) &mdash; 类似于常规的 `useState`，但通过自定义函数进行中介。[![][img-demo]](https://streamich.github.io/react-use/?path=/story/state-usemediatedstate--demo) - [`useFirstMountState`](./docs/useFirstMountState.md) &mdash; 检查当前渲染是否是首次渲染。[![][img-demo]](https://streamich.github.io/react-use/?path=/story/state-usefirstmountstate--demo) - [`useRendersCount`](./docs/useRendersCount.md) &mdash; 计算组件渲染次数。[![][img-demo]](https://streamich.github.io/react-use/?path=/story/state-userenderscount--demo) - [`createGlobalState`](./docs/createGlobalState.md) &mdash; 跨组件共享状态。[![][img-demo]](https://streamich.github.io/react-use/?path=/story/state-createglobalstate--demo) - [`useMethods`](./docs/useMethods.md) &mdash; `useReducer` 的简洁替代方案。[![][img-demo]](https://streamich.github.io/react-use/?path=/story/state-usemethods--demo) <br/> <br/> - [**杂项**]() - [`useEnsuredForwardedRef`](./docs/useEnsuredForwardedRef.md) 和 [`ensuredForwardRef`](./docs/useEnsuredForwardedRef.md) &mdash; 安全地使用 React.forwardedRef。[![][img-demo]](https://streamich.github.io/react-use/?path=/story/state-useensuredforwardedref--demo) <br /> <br /> <br /> <br /> <br /> <br /> <br /> <p align="center"> <a href="./docs/Usage.md"><strong>使用方法</strong></a> &mdash; 如何导入。 <br /> <a href="./LICENSE"><strong>无版权许可</strong></a> &mdash; 公共领域。 <br /> <a href="https://opencollective.com/react-use/contribute"><strong>支持</strong></a> &mdash; 将自己添加到下方的支持者列表中。 </p> <br /> <br /> <br /> <br /> <br /> <div align="center"> <h1>贡献者</h1> </div> <br /> <br />

<a href="https://github.com/streamich/react-use/graphs/contributors"><img src="https://yellow-cdn.veclightyear.com/2b54e442/ecbe38a8-1da7-4e36-a085-e44990b9c047.svg?width=890&button=false" /></a>

<br /> <br /> <br /> <br /> <br />