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

Welcome to the all new IdleTimer! The documentation has moved to https://idletimer.dev. There you can find everything you need to get started using and contributing to IdleTimer.

Changelog

5.5.2

✨ Enhancements

• Add defaults to IdleTimerComponent generic typescript types.