👍
react-use

^{Collection of essential React Hooks.
Port of libreact. See demos.}

npm i react-use

• Sensors
  • useBattery — 跟踪设备电池状态。
  • useGeolocation — 跟踪用户设备的地理位置状态。
  • useHover and useHoverDirty — 跟踪鼠标悬停某个元素的状态。
  • useIdle — 跟踪用户是否处于非活动状态。
  • useKeyPress — 跟踪是否按下了键盘键或一组键。
  • useLocation — 跟踪页面导航栏的位置状态。
  • useMedia — 跟踪CSS媒体查询的状态。
  • useMediaDevices — 跟踪连接的硬件设备的状态。
  • useMotion — 跟踪设备的运动传感器的状态。
  • useNetwork — 跟踪用户的互联网连接状态。
  • useOrientation — 跟踪设备屏幕方向的状态。
  • useSize — 跟踪一些HTML元素的尺寸。
  • useWindowSize — 跟踪 Window 大小.
    
    
  • useAudio — 播放音频并公开其控件。
  • useOutsideClick — 当用户点击目标区域外时触发回调。
  • useSpeech — 从文本字符串合成语音。
  • useVideo — 播放视频，跟踪其状态，以及公开播放控件。
  • useWait — UI的复杂等待管理。
    
    
• Animations
  • useRaf — 在每个requestAnimationFrame上重新呈现组件。
  • useSpring — 根据弹簧动力学随时间插入数字。
  • useTimeout — 超时后返回true。
  • useTween — 重新渲染组件，同时补间0到1之间的数字。
  • useUpdate — 返回一个回调，在调用时重新呈现组件。
    
    
• Side-effects
  • useAsync — 解析异步函数。
  • useCss — 动态调整CSS。
  • useFavicon — 设置页面的favicon。
  • useLocalStorage — 管理localStorage中的值。
  • useSessionStorage — 管理sessionStorage中的值。
  • useTitle — 设置页面标题。
  • useDebounce — 去抖函数。
    
    
• Lifecycles
  • useLifecycles — 调用mount和unmount回调。
  • useRefMounted — 跟踪组件是否已挂载。
  • useLogger — 在组件经历生命周期时登录控制台。
  • useMount — 调用mount回调。
  • useUnmount — 调用unmount回调。
    
    
• State
  • createMemo — memoized hooks的工厂。
  • useCallbag — 跟踪callbag的最新值。
  • useGetSet — 返回状态getter get()而不是raw状态。
  • useGetSetState — 就像useGetSet和useSetState有一个孩子。
  • useObservable — 跟踪Observable的最新值。
  • useSetState — 创建类似this.setState的setState方法。
  • useToggle and useBoolean — 跟踪布尔值的状态。
  • useCounter and useNumber — 跟踪数字的状态。
  • useList — 跟踪数组的状态。
  • useMap — 跟踪对象的状态。
    
    

_使用

要使用Hooks API，你需要安装React 16.8.1 或更高版本。

你可以单独导入每个钩子 import useToggle from 'react-use/lib/useToggle'.

_许可证

Unlicense — 公有领域