Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/roderickhsiao/idle-tracker

Javascript library to track browser inactivity
https://github.com/roderickhsiao/idle-tracker

brower idle javascript

Last synced: about 10 hours ago
JSON representation

Javascript library to track browser inactivity

Awesome Lists containing this project

README

        


Idle Tracker


idle tracker


npm
gzip size
downloads

Tiny Javascript library to track browser idle status. (callback when user is idle).

[Demo](https://roderickhsiao.github.io/idle-tracker/test/)

## Browsers support

| [IE / Edge](http://godban.github.io/browsers-support-badges/)
IE / Edge | [Firefox](http://godban.github.io/browsers-support-badges/)
Firefox | [Chrome](http://godban.github.io/browsers-support-badges/)
Chrome | [Safari](http://godban.github.io/browsers-support-badges/)
Safari | [iOS Safari](http://godban.github.io/browsers-support-badges/)
iOS Safari | [Samsung](http://godban.github.io/browsers-support-badges/)
Samsung | [Opera](http://godban.github.io/browsers-support-badges/)
Opera |
| --------- | --------- | --------- | --------- | --------- | --------- | --------- |
| Edge| last version| last 2 versions| last 2 versions| last 2 versions| last 2 versions| last 2 versions

## Installation

via [yarn](https://yarnpkg.com/en/docs)

```
$ yarn add idle-tracker
```

or via [npm](https://docs.npmjs.com/)

```
$ npm install idle-tracker
```

## Usage

```js
import IdleTracker from 'idle-tracker';

const idleTracker = new IdleTracker(options);

idleTracker.start(); // start tracker

idleTracker.end(); // stop tracker and release memory
```

#### Constructor options

| Options Name | Type | Default | Description |
| -------------- | -------- | ------- | ------------------------------------------------------------------------------------- |
| timeout (ms) | number | 30000 | timeout to count as idle |
| onIdleCallback | Function | noop | Function to be called when idle status change, payload will be `{ idle: true/false }`, with optional `event` payload |
| throttle | number | 500 | throttle rate of callback |

### Future

1. Browser might support this function natively in the future, see [Idle Detection API](https://web.dev/idle-detection/)
1. Related newer API/Library: [page-lifecycle](https://developers.google.com/web/updates/2018/07/page-lifecycle-api), [repo](https://github.com/GoogleChromeLabs/page-lifecycle)