idle-js
⏲
A really simple utility module for tracking user activity on a tab. Usefull to change the tab name, or creating micro interaction in your webapp.
- returning to a particular after no activity identified
- display a modal depending on activity
- change things while the user is away
- create anything funny :)
Warning IE11 is not supported by default anymore. If you want to use it, you might want to add a polyfill for Object.assign
-> https://www.jsdelivr.com/package/npm/polyfill-object-assign
Install
npm i idle-js
Browsers support
| | | | |
---|
Latest ✔ | Latest ✔ | 10+ ✔ | Latest ✔ | 6.1+ ✔ |
Usage in your script
var idle = new IdleJs({
idle: 10000,
events: ['mousemove', 'keydown', 'mousedown', 'touchstart'],
onIdle: ,
onActive: ,
onHide: ,
onShow: ,
keepTracking: true,
startAtIdle: false
})
To start observing the state of the tab:
idle.start()
If you need to stop observing:
idle.stop()
// stops all tracking
You can then reset and start again:
idle.stop()
.reset() // reset visible and idle state to initial values
.start() // restart
Reset to a specific state
idle.reset({
idle: false,
visible: ! document.hidden,
})
Running example
Simply start the server Vite
pnpm dev -- --port 3030
Need to choose an other port ? pnpm dev -- --port 6060
Open the local url, in your browser: http://localhost:3030
or http://localhost:THE_PORT_YOU_CHOOSE