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

React.js port of jQuery.idleTimer with some extras.

:rocket: Now with Babel 6 and react-transform support

Installation

npm install react-idle-timer

Usage

check the examples directory for a working example

import React from 'react'
import IdleTimer from 'react-idle-timer';

class YourApp extends React.Component {
  constructor(props) {
    super(props)
  }

  render() {
    return (
      <IdleTimer
        ref="idleTimer"
        element={document}
        activeAction={this._onActive}
        idleAction={this._onIdle}
        timeout={this.state.timeout}
        format="MM-DD-YYYY HH:MM:ss.SSS">

        <h1>All your children</h1>

      </IdleTimer>
    )
  }
}
module.exports = YourApp

Documentation

Props

• timeout {Number} - Idle timeout in milliseconds
• events {Array} - Events to bind
• 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
• format {String} - moment.js format string applied to lastActiveTime

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
• lastActiveTime() {String} - Returns the last active time as a number or a formatted string if the format prop is defined
• isIdle() {Boolean} - Returns whether or not user is idle