@react-corekit/use-idle

Detecting when the user becomes inactive (idle) or active.

Install

npm install --save @react-corekit/use-idle

yarn add @react-corekit/use-idle

Usage

import React from "react";

import { useIdle } from "@react-corekit/use-idle";

const Example = () => {
  const options = { timeToIdle: 1000 };
  const isIdle = useIdle(options);
  return <div>{isIdle ? "Are you still there?" : "Yes, you are here"}</div>;
};

mousemove event is ignored by default, to include it add the following line to the options object:

const options = { ignoredEventsWhenIdle: [] };

Advanced options

Activity detector allows you to configure some parameters:

• timeToIdle: number of milliseconds of inactivity which makes activity detector transition to 'idle' (30000 by default)
• activityEvents: the user events which make activity detector transition from 'idle' to 'active'. The default list of activityEvents is ['click', 'mousemove', 'keydown', 'DOMMouseScroll', 'mousewheel', 'mousedown', 'touchstart', 'touchmove', 'focus']
• inactivityEvents: the list of events which make the activity detector transition from 'active' to 'idle' without waiting for timeToIdle timeout. By default: ['blur']
• ignoredEventsWhenIdle: list of events to ignore in idle state. By default: ['mousemove']
• initialState: can be "idle" or "active" ("active" by default)

Visit: https://react-corekit.github.io/use-idle/ for a minimalistic live demo (Including mousemove event).

Additional documentation

Activity Detector Reference

Standard events Reference

License

MIT © glongh