传感器

2025-09-22 React Hook

传感器

useBattery — 跟踪设备电池状态
useGeolocation — 跟踪用户设备的地理位置状态
useHover and useHoverDirty — 跟踪鼠标悬停某个元素的状态
useIdle — 跟踪用户是否处于非活动状态
useKey, useKeyPress, useKeyboardJs, 和 useKeyPressEvent — 追踪按键
useLocation — 跟踪页面导航栏的位置状态
useMedia — 跟踪CSS媒体查询的状态
useMediaDevices — 跟踪连接的硬件设备的状态
useMotion — 跟踪设备的运动传感器的状态
useMouse and useMouseHovered — 跟踪鼠标位置的状态
useNetwork — 跟踪用户的互联网连接状态
useOrientation — 跟踪设备屏幕方向的状态
usePageLeave — 当鼠标离开页面边界时触发
useScroll — 跟踪HTML元素的滚动位置
useSize — 跟踪HTML元素的维度
useStartTyping — 检测用户何时开始输入
useWindowScroll — 跟踪窗口滚动位置
useWindowSize — 跟踪窗口尺寸

`useBattery`

React 传感器钩子，用于追踪电池状态。

用法

jsx 复制代码

import {useBattery} from 'react-use';

const Demo = () => {
  const state = useBattery();

  return (
    <pre>
      {JSON.stringify(state, null, 2)}
    </pre>
  );
};

`useGeolocation`

React 传感器钩子，用于追踪用户地理位置。

用法

jsx 复制代码

import {useGeolocation} from 'react-use';

const Demo = () => {
  const state = useGeolocation();

  return (
    <pre>
      {JSON.stringify(state, null, 2)}
    </pre>
  );
};

`useHover` and `useHoverDirty`

React 用户界面传感器钩子，用于追踪某个元素是否有鼠标悬停。

useHover 接收一个 React 元素或者返回一个元素的函数，useHoverDirty 接收 React ref。
useHover 设置 react onMouseEnter 和 onMouseLeave 事件,
useHoverDirty 设置 DOM onmouseover 和 onmouseout 事件.

用法

jsx 复制代码

import {useHover} from 'react-use';

const Demo = () => {
  const element = (hovered) =>
    <div>
      Hover me! {hovered && 'Thanks!'}
    </div>;
  const [hoverable, hovered] = useHover(element);

  return (
    <div>
      {hoverable}
      <div>{hovered ? 'HOVERED' : ''}</div>
    </div>
  );
};

参考

js 复制代码

const [newReactElement, isHovering] = useHover(reactElement);
const [newReactElement, isHovering] = useHover((isHovering) => reactElement);
const isHovering = useHoverDirty(ref);

`useIdle`

React 状态钩子，用于追踪页面上的用户是否空闲。

用法

jsx 复制代码

import {useIdle} from 'react-use';

const Demo = () => {
  const isIdle = useIdle(3e3);

  return (
    <div>
      <div>User is idle: {isIdle ? 'Yes 😴' : 'Nope'}</div>
    </div>
  );
};

参考

js 复制代码

useIdle(ms, initialState);

ms — 考虑使用空闲时间的毫秒时间, 默认为 60e3 — 1分钟。
initialState — 是否考虑用户初始空闲，默认为 false。

`useKey`

当使用键盘键时，React UI 传感器钩子执行handler。

Usage

jsx 复制代码

import useKey from 'react-use/lib/useKey';

const Demo = () => {
  const [count, set] = useState(0);
  const increment = () => set(count => ++count);
  useKey('ArrowUp', increment);

  return (
    <div>
      Press arrow up: {count}
    </div>
  );
};

Or as render-prop:

jsx 复制代码

import UseKey from 'react-use/lib/comps/UseKey';

<UseKey filter='a' fn={() => alert('"a" key pressed!')} />

Reference

js 复制代码

useKey(filter, handler, options?, deps?)

Examples

js 复制代码

useKey('a', () => alert('"a" pressed'));

const predicate = (event) => event.key === 'a'
useKey(predicate, handler, {event: 'keyup'});

`useKeyPress`

React 用户界面传感器钩子，用于检测用户何时按下键盘上的特殊键。

通过KeyboardJS key combos可以使用复杂的绑定，如检测何时同时按住多个建或要求他们按照指定的顺序按住它们。有关如何创建组合字符串的更多详细内容，请查阅其文档。

用法

jsx 复制代码

import { useKeyPress } from "react-use";

const Demo = () => {
  const hasPressedQ = useKeyPress("q");
  const hasPressedW = useKeyPress("w");
  const hasPressedE = useKeyPress("e");
  const hasPressedR = useKeyPress("r");
  const hasPressedT = useKeyPress("t");
  const hasPressedY = useKeyPress("y");
  const hasPressedWord = useKeyPress("q + w + e + r + t + y", {
    useKeyboardJS: true
  });

  return (
    <div>
      Try pressing each one of these at a time: <code>Q W E R T Y</code>
      {!hasPressedWord && (
        <div>
          {hasPressedQ && "Q"}
          {hasPressedW && "W"}
          {hasPressedE && "E"}
          {hasPressedR && "R"}
          {hasPressedT && "T"}
          {hasPressedY && "Y"}
        </div>
      )}
      <div>And now press them all at once!</div>
      <div>{hasPressedWord && "Q + W + E + R + T + Y"}</div>
    </div>
  );
};

参考

js 复制代码

const hasPressedSingleKey = useKeyPress("<key>");
const hasPressedKeyCombo = useKeyPress("<key combo>", {
  useKeyboardJS: true
});

`useKeyboardJs`

React UI传感器钩子，可检测复杂的键组合，如检测时间

多个键同时按下或要求按指定的顺序按下它们。

通过[KeyboardJS键组合]（https://github.com/RobertWHurst/KeyboardJS）。

有关如何制作组合字符串的更多详细信息，请查看其文档。

Usage

jsx 复制代码

import useKeyboardJs from 'react-use/lib/useKeyboardJs';

const Demo = () => {
  const [isPressed] = useKeyboardJs('a + b');

  return (
    <div>
      [a + b] pressed: {isPressed ? 'Yes' : 'No'}
    </div>
  );
};

Requirements

Install keyboardjs peer dependency:

bash 复制代码

npm add keyboardjs
# or
yarn add keyboardjs

Reference

js 复制代码

useKeyboardJs(combination: string): [isPressed: boolean, event?: KeyboardEvent]

`useKeyPressEvent`

此钩子会触发 keydown 和 keyup 回调，类似于 useKey 钩子的操作，但每个回调在每个按键周期内仅触发一次。例如，如果您按住某个键，它只会触发一次 keydown 回调。

这个钩子触发keydown和keydup 回调，类似于 usekey ，但在一个周期内只会触发一次回调。
例如，如果你按住一个键，它将只触发一次keydown回调。

Usage

jsx 复制代码

import React, { useState } from React;
import useKeyPressEvent from 'react-use/lib/useKeyPressEvent';

const Demo = () => {
  const [count, setCount] = useState(0);

  const increment = () => setCount(count => ++count);
  const decrement = () => setCount(count => --count);
  const reset = () => setCount(count => 0);

  useKeyPressEvent(']', increment, increment);
  useKeyPressEvent('[', decrement, decrement);
  useKeyPressEvent('r', reset);

  return (
    <div>
      <p>
        Try pressing <code>[</code>, <code>]</code>, and <code>r</code> to
        see the count incremented and decremented.</p>
      <p>Count: {count}</p>
    </div>
  );
};

Reference

js 复制代码

useKeyPressEvent('<key>', keydown);
useKeyPressEvent('<key>', keydown, keyup);
useKeyPressEvent('<key>', keydown, keyup, useKeyPress);

`useLocation`

React 传感器钩子，用于追踪浏览器的位置。

对于 Internet Explorer，你需要安装polyfill。

用法

jsx 复制代码

import {useLocation} from 'react-use';

const Demo = () => {
  const state = useLocation();

  return (
    <pre>
      {JSON.stringify(state, null, 2)}
    </pre>
  );
};

`useMedia`

React 传感器钩子，用于跟踪CSS媒体查询的状态。

用法

jsx 复制代码

import {useMedia} from 'react-use';

const Demo = () => {
  const isWide = useMedia('(min-width: 480px)');

  return (
    <div>
      Screen is wide: {isWide ? 'Yes' : 'No'}
    </div>
  );
};

`useMediaDevices`

React 传感器钩子，用于跟踪连接的硬件设备。

用法

jsx 复制代码

import {useMediaDevices} from 'react-use';

const Demo = () => {
  const state = useMediaDevices();

  return (
    <pre>
      {JSON.stringify(state, null, 2)}
    </pre>
  );
};

`useMotion`

React 传感器钩子，使用设备的加速度传感器跟踪其运动。

用法

jsx 复制代码

import {useMotion} from 'react-use';

const Demo = () => {
  const state = useMotion();

  return (
    <pre>
      {JSON.stringify(state, null, 2)}
    </pre>
  );
};

`useMouse` and `useMouseHovered`

React 感器钩子，在鼠标位置更改时重新渲染。 useMouse只是跟踪鼠标位置; useMouseHovered允许你指定额外的选项：

bound — 绑定元素中的鼠标坐标
whenHovered — 是否仅当用户将鼠标悬停在元素上时才附加mousemove事件处理程序

Usage

jsx 复制代码

import {useMouse} from 'react-use';

const Demo = () => {
  const ref = React.useRef(null);
  const {docX, docY, posX, posY, elX, elY, elW, elH} = useMouse(ref);

  return (
    <div ref={element}>
      <div>Mouse position in document - x:{docX} y:{docY}</div>
      <div>Mouse position in element - x:{posX} y:{posY}</div>
      <div>Element position - x:{elX} y:{elY}</div>
      <div>Element dimensions - {elW}x{elH}</div>
    </div>
  );
};

Reference

ts 复制代码

useMouse(ref);
useMouseHovered(ref, {bound: false, whenHovered: false});

`useNetwork`

React 传感器钩子，用于跟踪连接的硬件设备。返回：

json 复制代码

{
  "online": true,
  "since": "2018-10-27T08:59:05.562Z",
  "downlink": 10,
  "effectiveType": "4g",
  "rtt": 50
}

用法

jsx 复制代码

import {useNetwork} from 'react-use';

const Demo = () => {
  const state = useNetwork();

  return (
    <pre>
      {JSON.stringify(state, null, 2)}
    </pre>
  );
};

`useOrientation`

React 传感器钩子，跟踪用户设备的屏幕方向。

以以下形式返回状态：

js 复制代码

{
  angle: 0,
  type: 'landscape-primary'
}

用法

jsx 复制代码

import {useOrientation} from 'react-use';

const Demo = () => {
  const state = useOrientation();

  return (
    <pre>
      {JSON.stringify(state, null, 2)}
    </pre>
  );
};

`usePageLeave`

当鼠标离开页面时，React 传感器钩子会触发回调。

Usage

jsx 复制代码

import {usePageLeave} from 'react-use';

const Demo = () => {
  usePageLeave(() => console.log('Page left...'));

  return null;
};

`useScroll`

当 DOM 元素中的滚动位置发生更改时，React 传感器钩子将会重新渲染。

Usage

jsx 复制代码

import {useScroll} from 'react-use';

const Demo = () => {
  const scrollRef = React.useRef(null);
  const {x, y} = useScroll(scrollRef);

  return (
    <div ref={scrollRef}>
      <div>x: {x}</div>
      <div>y: {y}</div>
    </div>
  );
};

Reference

ts 复制代码

useScroll(ref: RefObject<HTMLElement>);

`useSize`

React sensor hook that tracks size of some HTML element.

用法

jsx 复制代码

import {useSize} from 'react-use';

const Demo = () => {
  const [sized, {width, height}] = useSize(
    ({width}) => <div style={{border: '1px solid red'}}>Size me up! ({width}px)</div>
  );

  return (
    <div>
      {sized}
      <div>width: {width}</div>
      <div>height: {height}</div>
    </div>
  );
};

`useStartTyping`

React传感器钩子，用于在用户开始键入时触发回调。可用于聚焦页面上的默认输入字段。

Usage

jsx 复制代码

import useStartTyping from 'react-use/lib/useStartTyping';

const Demo = () => {
  useStartTyping(() => alert('Started typing...'));

  return null;
};

`useWindowScroll`

React 传感器钩子，在窗口滚动时重新渲染。

Usage

jsx 复制代码

import {useWindowScroll} from 'react-use';

const Demo = () => {
  const {x, y} = useWindowScroll();

  return (
    <div>
      <div>x: {x}</div>
      <div>y: {y}</div>
    </div>
  );
};

`useWindowSize`

React 传感器钩子，用于跟踪浏览器窗口的大小。

用法

jsx 复制代码

import {useWindowSize} from 'react-use';

const Demo = () => {
  const {width, height} = useWindowSize();

  return (
    <div>
      <div>width: {width}</div>
      <div>height: {height}</div>
    </div>
  );
};

React Hook

传感器

用户界面

动画效果

副作用

生命周期

状态

传感器

传感器

useBattery

用法

useGeolocation

用法

useHover and useHoverDirty

用法

参考

useIdle

用法

参考

useKey

Usage

Reference

Examples

useKeyPress

用法

参考

useKeyboardJs

Usage

Requirements

Reference

useKeyPressEvent

Usage

Reference

useLocation

用法

useMedia

用法

useMediaDevices

用法

useMotion

用法

useMouse and useMouseHovered

Usage

Reference

useNetwork

用法

useOrientation

用法

usePageLeave

Usage

useScroll

Usage

Reference

useSize

用法

useStartTyping

Usage

useWindowScroll

Usage

useWindowSize

用法

React Hook

`useBattery`

`useGeolocation`

`useHover` and `useHoverDirty`

`useIdle`

`useKey`

`useKeyPress`

`useKeyboardJs`

`useKeyPressEvent`

`useLocation`

`useMedia`

`useMediaDevices`

`useMotion`

`useMouse` and `useMouseHovered`

`useNetwork`

`useOrientation`

`usePageLeave`

`useScroll`

`useSize`

`useStartTyping`

`useWindowScroll`

`useWindowSize`