Security News
Node.js EOL Versions CVE Dubbed the "Worst CVE of the Year" by Security Experts
Critics call the Node.js EOL CVE a misuse of the system, sparking debate over CVE standards and the growing noise in vulnerability databases.
react-idle-timer
Advanced tools
The react-idle-timer package is a React component that helps you detect and manage idle state in your application. It allows you to perform actions based on user inactivity, such as logging out the user, showing a warning message, or triggering any other custom behavior.
Detecting Idle State
This feature allows you to detect when the user becomes idle. The `useIdleTimer` hook is used to set a timeout (in this case, 15 minutes) and a callback function (`handleOnIdle`) that gets called when the user is idle.
import React from 'react';
import { useIdleTimer } from 'react-idle-timer';
const App = () => {
const handleOnIdle = () => {
console.log('User is idle');
};
const { getRemainingTime, getLastActiveTime } = useIdleTimer({
timeout: 1000 * 60 * 15,
onIdle: handleOnIdle,
debounce: 500
});
return (
<div>
<p>Remaining time: {getRemainingTime()}</p>
<p>Last active time: {getLastActiveTime()}</p>
</div>
);
};
export default App;
Resetting Idle Timer
This feature allows you to manually reset the idle timer. The `reset` function from the `useIdleTimer` hook can be called to reset the timer, for example, when a user performs a specific action like clicking a button.
import React from 'react';
import { useIdleTimer } from 'react-idle-timer';
const App = () => {
const { reset } = useIdleTimer({
timeout: 1000 * 60 * 15,
onIdle: () => console.log('User is idle'),
debounce: 500
});
return (
<div>
<button onClick={reset}>Reset Timer</button>
</div>
);
};
export default App;
Pausing and Resuming Idle Timer
This feature allows you to pause and resume the idle timer. The `pause` and `resume` functions from the `useIdleTimer` hook can be used to control the timer based on specific user actions.
import React from 'react';
import { useIdleTimer } from 'react-idle-timer';
const App = () => {
const { pause, resume } = useIdleTimer({
timeout: 1000 * 60 * 15,
onIdle: () => console.log('User is idle'),
debounce: 500
});
return (
<div>
<button onClick={pause}>Pause Timer</button>
<button onClick={resume}>Resume Timer</button>
</div>
);
};
export default App;
The idle-js package is a lightweight JavaScript library for detecting user inactivity. It provides similar functionality to react-idle-timer but is not specifically designed for React. It can be used in any JavaScript application to detect idle state and perform actions based on user inactivity.
The react-idle package is another React component for detecting user inactivity. It offers similar features to react-idle-timer, such as detecting idle state and performing actions based on user inactivity. However, it may have a different API and set of features compared to react-idle-timer.
⚡️ Cross Tab Event Reconciliation
🚀 Support for Isomorphic React
🎣 Hook Implementation
In the next major version, IdleTimer will be dropping default support for dead browsers. The main exports will be for modern browsers and ES Modules only. Version 4.6.3
added a new export for modern browsers to allow Content Security Policies to be added without regenerator-runtime violations:
import IdleTimer, { useIdleTimer } from 'react-idle-timer/modern'
If your build chain does not support node sub-modules (Webpack <= v4), you will need to import directly from dist.
import IdleTimer, { useIdleTimer } from 'react-idle-timer/dist/modern'
In version 5 this will be inverted. The default export will be for modern browsers. If you need support for CommonJS/ Babel compiled source, you will need to import the legacy package:
import IdleTimer, { useIdleTimer } from 'react-idle-timer/legacy'
Again, if your build chain does not support node sub-modules (Webpack <= v4), you will need to import directly from dist.
import IdleTimer, { useIdleTimer } from 'react-idle-timer/dist/legacy'
If you have any questions or concerns feel free to open an issue on github. The version 5 release is planned for late Q3 - early Q4 2021.
4.6.0
adds cross tab support:☝️ Added robust cross tab support with configurable modes and messaging strategies. See the documentation and examples for capabilities and usage.
✌️ Added a startManually
configuration option enabling manual starting of the timer and activity detection. A new method called start()
is also exposed to keep implementations more semantic. It is functionally equivalent to reset
, but won't call onActive
.
This release also includes updates to the test suite and various bug fixes. See the CHANGELOG for a complete list of updates in this version.
4.5.0
adds user idle time tracking:☝️ Added getTotalIdleTime()
and getLastIdleTime()
methods to track user idle timings.
4.4.0
adds user active time tracking and reduces module size:☝️ 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:☝️ 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
.
yarn add react-idle-timer
or
npm install react-idle-timer --save
You can install the dependencies for all the examples by running:
npm run example-install
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())
}
}
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 = event => {
console.log('user did something', event)
}
const { getRemainingTime, getLastActiveTime } = useIdleTimer({
timeout: 1000 * 60 * 15,
onIdle: handleOnIdle,
onActive: handleOnActive,
onAction: handleOnAction,
debounce: 500
})
return (
<div>
{/* your app here */}
</div>
)
}
The IdleTimer
component and the useIdleTimer
hook now support cross tab reconciliation of onIdle
and onActive
events. This functionality is off by default, so updating to this version will not change how your app operates unless you enable the feature.
The cross tab feature has two modes of operation: Emit on Leader and Emit on All Tabs. The default mode is emit on leader:
While in emit on leader mode, the lead tab will be the only emitter of onIdle
and onActive
functions. This is useful if your events should only emit one time once all tabs are idle or when a tab becomes active from an "all idle" state. To enable this mode, just set crossTab
to true.
// Hook
useIdleTimer({
...
crossTab: true
})
// Component
<IdleTimer crossTab ... />
While in emit on all tabs mode, the lead tab will detect when all tabs have become idle or when a tab has become active from an "all idle" state and instruct all tabs to emit their onIdle
and onActive
events. This is useful when your events are used to open a modal, or some other UI intermediary. To enable this mode, set crossTab
to an object with the property emitOnAllTabs
set to true.
If
emitOnAllTabs
is enabled,start
,reset
,pause
andresume
will also be emitted on all tabs.
// Hook
useIdleTimer({
...
crossTab: {
emitOnAllTabs: true
}
})
// Component
<IdleTimer
...
crossTab={{
emitOnAllTabs: true
}}
/>
There are three messaging strategies that can be used: broadcastChannel
, localStorage
and simulate
. By default, the best strategy is chosen automatically. broadcastChannel
where it is supported and localStorage
as a fallback. The simulate
strategy is intended for use in test suites and is not considered during automatic strategy selection.
You can override default selection by supplying a type
parameter to the crossTab
configuration.
// Hook
useIdleTimer({
...
crossTab: {
type: 'simulate'
}
})
// Component
<IdleTimer
...
crossTab={{
type: 'simulate'
}}
/>
The typescript definitions and documentation contain all the available configuration options, but you most likely won't need to change them. Here is an example of a fully configured hook and component with their default values. More information about each option is available in the documentation below.
// Hook
useIdleTimer({
crossTab: {
type: undefined,
channelName: 'idle-timer',
fallbackInterval: 2000,
responseTime: 100,
removeTimeout: 1000 * 60,
emitOnAllTabs: false
}
})
// Component
<IdleTimer
crossTab={{
type: undefined,
channelName: 'idle-timer',
fallbackInterval: 2000,
responseTime: 100,
removeTimeout: 1000 * 60,
emitOnAllTabs: false
}}
/>
mousemove
keydown
wheel
DOMMouseScroll
mousewheel
mousedown
touchstart
touchmove
MSPointerDown
MSPointerMove
visibilitychange
Name | Type | Default | Description |
---|---|---|---|
timeout | Number | 1000 * 60 * 20 | Idle timeout in milliseconds. |
events | Array | default events | Events to bind. |
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 | 0 | Debounce the onAction function with delay in milliseconds. Cannot be set if throttle is set. |
throttle | Number | 0 | Throttle the onAction function with delay in milliseconds. Cannot be set if debounce is set. |
eventsThrottle | Number | 200 | Throttle the event handler. Helps to reduce cpu utilization on repeated events (mousemove ). |
element | Object | document | Defaults to document, may pass a ref to another element. |
startOnMount | Boolean | true | Start the timer when the component mounts. Set to false to wait for user action before starting timer. |
startManually | Boolean | false | Require the timer to be started manually by calling reset() or start() . |
stopOnIdle | Boolean | false | Stop the timer when user goes idle. If set to true you will need to manually call reset() or start() to restart the timer. |
passive | Boolean | true | Bind events in passive mode. |
capture | Boolean | true | Bind events in capture mode. |
crossTab | Boolean |Object | false | Enable cross tab event reconciliation. |
crossTab.emitOnAllTabs | Boolean | false | Emit events on all tabs. |
crossTab.type | String | undefined | Message strategy to use. Selected automatically if left undefined . Can be one of broadcastChannel , localStorage or simulate . |
crossTab.channelName | String | idle-timer | Name of the BroadcastChannel or localStorage key. |
crossTab.fallbackInterval | Number | 2000 | How often renegotiation for leader will occur. |
crossTab.responseTime | Number | 100 | How long tab instances will have to respond. |
crossTab.removeTimeout | Number | 1000 * 60 | LocalStorage item time to live. |
Name | Returns | Description |
---|---|---|
start() | Void | Starts the idleTimer. Won't call onActive . |
reset() | Void | Resets the idleTimer. Calls onActive . |
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. |
isLeader() | Boolean | Returns whether or not this is the leader tab. Always true if crossTab is not enabled. |
4.6.4
ref
optional in typedef.FAQs
Activity detection for React.js
The npm package react-idle-timer receives a total of 478,126 weekly downloads. As such, react-idle-timer popularity was classified as popular.
We found that react-idle-timer demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Critics call the Node.js EOL CVE a misuse of the system, sparking debate over CVE standards and the growing noise in vulnerability databases.
Security News
cURL and Go security teams are publicly rejecting CVSS as flawed for assessing vulnerabilities and are calling for more accurate, context-aware approaches.
Security News
Bun 1.2 enhances its JavaScript runtime with 90% Node.js compatibility, built-in S3 and Postgres support, HTML Imports, and faster, cloud-first performance.