useUserIdle
一个用于帮助检测用户是否处于空闲状态的 React Hook。
内部会检测 ['mousemove', 'mousedown', 'resize', 'keydown', 'touchstart', 'wheel'] 事件，当用户在指定时间（默认 1 分钟）内没有触发这些事件时，则将用户视为处于空闲状态。
演示
默认超时时间 1 分钟，这里为了方便演示，设置为 1 秒。
源码Last Active: 2024-11-12 08:40:00
用法
const idleInfo = useUserIdle(30_000)
console.log(idleInfo.isIdle)
源码
API
const { lastActive, isIdle, reset } = useUserIdle(timeout, options)
超时 Timeout
一个 number 类型的值，表示将用户视为闲置状态之前的毫秒数。
选项 Options
export interface UseUserIdleOptions {
/**
* 监听以便检测用户活动的事件名称
*
* @defaultValue ['mousemove', 'mousedown', 'resize', 'keydown', 'touchstart', 'wheel']
*/
events?: WindowEventName[]
/**
* 监听文档可见性变化
*
* @defaultValue true
*/
watchVisibility?: boolean
/**
* 初始状态的 ref 是否空闲
*
* @defaultValue false
*/
initialState?: boolean
/**
* 立即重置空闲状态
*
* @defaultValue true
*/
immediate?: boolean
}
返回值
返回值中包含可暂停、恢复的 Pausable 实例。
更多详情，请参见 Pausable。
export interface UseUserIdleReturns extends Pausable<[reset?: boolean], [reset?: boolean]> {
/**
* 用户是否空闲
*/
isIdle: boolean
/**
* 最后一次用户活动的时间戳
*/
lastActive: MutableRefObject<number>
/**
* 重置空闲状态
*
* @param restart - 是否重新启动空闲计时器，默认为 `true`。
*/
reset: (restart?: boolean) => void
}
