DEV Community

Discussion on: Hacktoberfest 2021 is Here 🎃

View post
Collapse
 
filipjelic profile image
Filip • • Edited

Happy hacktoberfest everyone 🐱‍🏍
For all those who need to track users idleness on their ReactJS apps, feel free to contribute

GitHub logo filipjelic / react-activity-detector

Small package to help you check whether user is idle or active.

react-activity-detector 😴

npm License Build Status

Activity detector is a package which makes it simple to track if your user is still idle or active.

Install

$ npm install --save react-activity-detector

How to use

Basic example

import ActivityDetector from 'react-activity-detector';

const customActivityEvents = [
    'click',
    'keydown',
];

const signOut = () => {
console.log("The user is loged out");
}

<ActivityDetector activityEvents={customActivityEvents} isActive={true} timeout={5*1000} signOut={signOut}/>
Enter fullscreen mode Exit fullscreen mode

Parameter options

  • isActive: Boolean value indicating if the AD is active or not.
  • timeout time in milliseconds which will trigger signOut
  • activityEvents: events used to detect if the user is active or not. Default list of Activity Events is ['click', 'mousemove', 'keydown', 'DOMMouseScroll', 'mousewheel', 'mousedown', 'touchstart', 'touchmove', 'focus']. If none event is sent the list…
View on GitHub