This module helps you detecting when the user becomes idle (does not interact with the page for some time) or active in your page.
$ npm install --save activity-detector
Or load it from unpkg:
<script src="https://unpkg.com/activity-detector/dist/activity-detector.min.js"></script>
import createActivityDetector from 'activity-detector';
const activityDetector = createActivityDetector();
activityDetector.on('idle', () => {
console.log('The user is not interacting with the page');
});
activityDetector.on('active', () => {
console.log('The user is using the page');
});
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 fortimeToIdle
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)autoInit
: whentrue
the activity detector starts just after creation, whenfalse
, it doesn't start until you call the.init()
method (true
by default)
For example:
const activityDetector = createActivityDetector({
timeToIdle: 20000, // wait 20s of inactivity to consider the user is idle
autoInit: false // I don't want to start the activity detector yet.
});
activityDetector.on('idle', handleUserIdle);
...
...
// I want to start the activity detector now!
activityDetector.init();
An activity detector instance has the following methods:
Initializes the activity detector in the given state. This method should only be used if you created the activity detector with the autoInit
option false
.
This method receives the initialState
param. It can be 'idle'
or 'active'
(default)
Registers an event listener for the required event
event
can be 'idle'
or 'active'
.
handler
must be a function.
Stops the activity detector and cleans the listeners.
$ npm install
$ npm test