SupremeTechnopriest / React Idle Timer
Programming Languages
Projects that are alternatives of or similar to React Idle Timer
⏱ React Idle Timer
⚡️ Support for React 16
🚀 Support for Isomorphic React
🎣 Hook Implementation
Latest News
4.5.0
adds user idle time tracking:
Version ☝️ Added getTotalIdleTime()
and getLastIdleTime()
methods to track user idle timings.
4.4.0
adds user active time tracking and reduces module size:
Version ☝️ Added getTotalActiveTime()
method to get the total milliseconds a user has been active for the current session.
✌️ Reduced NPM package size by excluding examples from downloaded module.
4.3.0
adds a new hook implementation and some minor performance improvements:
Version ☝️ The hook implementation is here! It takes the same properties and returns the same API as the component implementation. See here for usage or check out the new example. There are now TypeScript examples as well.
✌️ Added a new property called eventsThrottle
. This will throttle the event handler to help decrease cpu usage on certain events (looking at you mousemove
). It defaults to 200ms, but can be set however you see fit. To disable this feature, set it to 0
.
For the full patch notes please refer to the CHANGELOG
Installation
yarn add react-idle-timer
or
npm install react-idle-timer --save
Examples
You can install the dependencies for all the examples by running:
npm run example-install
Component Usage
Run
npm run example-component
to build and run the component example. The example is a create-react-app project. IdleTimer is implemented in the App Component.
import React, { Component } from 'react'
import IdleTimer from 'react-idle-timer'
export default class YourApp extends Component {
constructor(props) {
super(props)
this.idleTimer = null
this.handleOnAction = this.handleOnAction.bind(this)
this.handleOnActive = this.handleOnActive.bind(this)
this.handleOnIdle = this.handleOnIdle.bind(this)
}
render() {
return (
<div>
<IdleTimer
ref={ref => { this.idleTimer = ref }}
timeout={1000 * 60 * 15}
onActive={this.handleOnActive}
onIdle={this.handleOnIdle}
onAction={this.handleOnAction}
debounce={250}
/>
{/* your app here */}
</div>
)
}
handleOnAction (event) {
console.log('user did something', event)
}
handleOnActive (event) {
console.log('user is active', event)
console.log('time remaining', this.idleTimer.getRemainingTime())
}
handleOnIdle (event) {
console.log('user is idle', event)
console.log('last active', this.idleTimer.getLastActiveTime())
}
}
Hook Usage
Run
npm run example-hook
to build and run the hook example. The example is a create-react-app project. IdleTimer is implemented in the App Component.
import React from 'react'
import { useIdleTimer } from 'react-idle-timer'
import App from './App'
export default function (props) {
const handleOnIdle = event => {
console.log('user is idle', event)
console.log('last active', getLastActiveTime())
}
const handleOnActive = event => {
console.log('user is active', event)
console.log('time remaining', getRemainingTime())
}
const handleOnAction = (e) => {
console.log('user did something', e)
}
const { getRemainingTime, getLastActiveTime } = useIdleTimer({
timeout: 1000 * 60 * 15,
onIdle: handleOnIdle,
onActive: handleOnActive,
onAction: handleOnAction,
debounce: 500
})
return (
<div>
{/* your app here */}
</div>
)
}
Migration from v3 to v4
There are a few breaking changes in version 4:
- Although still capable of rendering children, as of version 4 we don't pass children to
IdleTimer
. Unless you are really good withshouldComponentUpdate
you should avoid usingIdleTimer
as a wrapper component. - The property
startOnLoad
has been renamed tostartOnMount
in order to make more sense in a React context. - The property
activeAction
has been renamed toonActive
. - The property
idleAction
has been renamed toonIdle
.
Documentation
Default Events
- mousemove
- keydown
- wheel
- DOMMouseScroll
- mousewheel
- mousedown
- touchstart
- touchmove
- MSPointerDown
- MSPointerMove
- visibilitychange
Props
- timeout {Number} - Idle timeout in milliseconds.
- events {Array} - Events to bind. See default events for list of defaults.
- onIdle {Function} - Function to call when user is now idle.
- onActive {Function} - Function to call when user is no longer idle.
- onAction {Function} - Function to call on user action.
-
debounce {Number} - Debounce the
onAction
function with delay in milliseconds. Defaults to0
. Cannot be set ifthrottle
is set. -
throttle {Number} - Throttle the
onAction
function with delay in milliseconds. Defaults to0
. Cannot be set ifdebounce
is set. -
eventsThrottle {Number} - Throttle the event handler. Helps to reduce cpu usage on repeated events (
mousemove
). Defaults to200
. - element {Object} - Defaults to document, may pass a ref to another element.
-
startOnMount {Boolean} - Start the timer when the component mounts. Defaults to
true
. Set tofalse
to wait for user action before starting timer. -
stopOnIdle {Boolean} - Stop the timer when user goes idle. Defaults to
false
. If set to true you will need to manually callreset()
to restart the timer. -
passive {Boolean} - Bind events in passive mode. Defaults to
true
. -
capture {Boolean} - Bind events in capture mode. Defaults to
true
.
Methods
- reset() {Void} - Resets the idleTimer.
- pause() {Void} - Pauses the idleTimer.
- resume() {Void} - Resumes a paused idleTimer.
- getRemainingTime() {Number} - Returns the remaining time in milliseconds.
- getElapsedTime() {Number} - Returns the elapsed time in milliseconds.
-
getLastIdleTime() {Number} - Returns the
Timestamp
the user was last idle. - getTotalIdleTime() {Number} - Returns the amount of time in milliseconds the user was idle.
-
getLastActiveTime() {Number} - Returns the
Timestamp
the user was last active. - getTotalActiveTime() {Number} - Returns the amount of time in milliseconds the user was active.
- isIdle() {Boolean} - Returns whether or not user is idle.