使用 Idle 钩

useIdle 是一种反应钩,旨在检测应用程序中的用户不活动或闲置时间. 它在指定的不活动期后引发状态变化,使其对自动登录或活动等行动有用.

特征

• 空闲时间检测 : 跟踪用户在设定周期后不活动并更改状态.
• 活动监测: 将闲置的计时器重置于用户交互上, 如鼠标移动、按键压和滚动等.
• SSR 兼容性 : 安全处理服务器侧渲染 window 对象.
• 可配置的空闲时间 : 允许设置自定义持续时间来定义用户不活动 .

安装

只安装当前钩

npm install @custom-react-hooks/use-idle

或者说

yarn add @custom-react-hooks/use-idle

安装全部钩

npm install @custom-react-hooks/all

或者说

yarn add @custom-react-hooks/all

导入虎克

这个 useIdle 钩必须使用下列命名的导入方式导入:

已命名的导入 :

import { useIdle } from '@custom-react-hooks/use-idle';

这种方法确保了钩子无缝地融入到您的项目中,在您如何使用我们的包时保持一致性和可预测性.

使用量

import React from 'react';
import { useIdle } from '@custom-react-hooks/all';
import { MoonIcon, SunIcon } from '@heroicons/react/24/solid';


const IdleComponent = () => {
  const isIdle = useIdle(1000);

  return (
    <div className="center">
      {isIdle ? (
        <div className="btns">
          <MoonIcon/>
          <p>Away</p>
        </div>
      ) : (
        <div className="btns">
          <SunIcon/>
          <p>Online</p>
        </div>
      )}
      <br />
      <p>To see the effect, do not move the mouse or touch the keyboard!</p>
    </div>
  );
};

export default IdleComponent;

在这个例子中,钩子用于检测用户被闲置超过3秒的时间.

API 参考

参数

• idleTime: 以毫秒计等待的时间, 然后再将用户视为闲置 .

回返

• 返回布尔状态,表示用户是否闲置 .

使用大小写

• 自动注销: 为安全目的在一段时间后自动登录用户.
• 暂停背景活动:暂停或减少动画或数据采集等背景活动.
• 用户活动监测: 跟踪用户活动以了解使用模式或分析.
• 节能:通过缩小屏幕或减少资源密集型任务来降低能耗.

捐款

对加强工作的贡献 useIdle 欢迎光临。 请随意向存储处提交问题或调取请求.