react-idle-timer

What is react-idle-timer?

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.

What are react-idle-timer's main functionalities?

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;

Other packages similar to react-idle-timer

idle-js

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.

react-idle

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.

README

React Idle Timer

⚡️ Support for React 16
🚀 Support for Isomorphic React

Latest News

Welcome to version 4 of IdleTimer! We have performed a complete rewrite of our build system and a refactor/ clean up of the source code. After accepting many pull requests things started to get ugly. We added test coverage and continuous integration tools (travis and codeclimate) that will automatically enforce style and test future pull requests.

There are a few breaking changes in version 4:

• The property startOnLoad has been renamed to startOnMount in order to make more sense in a react context.
• The property activeAction has been renamed to onActive.
• The property idleAction has been renamed to onIdle.

For the full patch notes please refer to the CHANGELOG

Installation

yarn add react-idle-timer or npm install react-idle-timer --save

Usage

Run yarn example to build and run the example 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.onActive = this._onActive.bind(this)
    this.onIdle = this._onIdle.bind(this)
  }

  render() {
    return (
      <IdleTimer
        ref={ref => { this.idleTimer = ref }}
        element={document}
        onActive={this.onActive}
        onIdle={this.onIdle}
        timeout={1000 * 60 * 15}>

        <h1>Child Components</h1>

      </IdleTimer>
    )
  }

  _onActive(e) {
    console.log('user is active', e)
    console.log('time remaining', this.idleTimer.getRemainingTime())
  }

  _onIdle(e) {
    console.log('user is idle', e)
    console.log('last active', this.idleTimer.getLastActiveTime())
  }
}

Documentation

To build the source code generated html docs run yarn docs and open docs/index.html in any browser. A markdown version is available here.

Default Events

These events are bound by default:

• mousemove
• keydown
• wheel
• DOMMouseScroll
• mouseWheel
• mousedown
• touchstart
• touchmove
• MSPointerDown
• MSPointerMove

Props

• timeout {Number} - Idle timeout in milliseconds
• events {Array} - Events to bind. See default events
• idleAction {Function} - Function to call on idle
• activeAction {Function} - Function to call on active
• element {Object} - Defaults to document, may pass a ref to another element
• startOnMount {Boolean} - Start the timer on component load. Defaults to true. Set to false to wait for user action before starting timer.
• passive {Boolean} - Bind events in passive mode. Defaults to true. Set to false to explicitly set to active mode.
• capture {Boolean} - Capture events. 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
• getLastActiveTime() {String} - Returns the Date the user was last active
• isIdle() {Boolean} - Returns whether or not user is idle

Changelog

4.0.0

Version 4.0 contains a rewrite of the build system and a refactor of the source code for IdleTimer. After accepting many pull requests, the projects code style was destroyed, so some forced styling was added and PRs that don't respect this style will not be accepted. Contribution guide now on the README.

🔥 Code Removal

• The property startOnLoad has been renamed to startOnMount to make more sense in a react context.
• The property activeAction has been renamed to onActive.
• The property idleAction has been renamed to onIdle.

✨ Enhancements

• Add passive property. Defaults to true, bind events with passive mode enabled.
• Add capture property. Defaults to true, bind events with capture mode enabled.
• Pass event through to onActive callback functions.

🐞 Bug Fixes

• Fixed installation bug on windows machines. This was due to the use of environment variables in the build scripts. The new build system does not rely on environment variables defined at the cli level