IdleSensor.md

<IdleSensor>

Tracks if use is active on the page. If user does not perform any events on the page during a specified timeout, IdleSensor fires an event and changes its state.

Uses these events to track user activity:

['mousemove', 'mousedown', 'resize', 'keydown', 'touchstart', 'wheel', 'visibilitychange']

All events, except visibilitychange, are fired by window object and the list can be set in props.

Usage

import {IdleSensor} from 'libreact/lib/IdleSensor';

<IdleSensor ms={10000} onChange={(idle) => console.log(idle)}>
  {({idle}) =>
    <div>
      User is idle: {idle ? 'TRUE' : 'FALSE'}
    </div>
  }
</IdleSensor>

Props

Signature

interface IIdleSensorProps {
  events?: string[];
  ms?: number;
  onChange?: (idle: boolean) => void;
  throttle?: number;
}

, where

• events — optional, list of window events to listen to.
• ms — optional, number, time in milliseconds after which to consider user idle, defaults to 1000 * 60 * 2.
• onChange — optional, callback, fires when IdleSensor changes its state, receives a single boolean argument.
• throttle — optional, number, time in milliseconds used to throttle events, defaults to 50. This prop cannot be changed dynamically.

withIdle() HOC

Enhancer that injects idle prop into your component.

@withIdle decorator

Stateful component class decorator that injects idle prop.