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.0.0

Version 5 is a complete, from scratch, typescript rewrite. A lot of effort went into this release. If you find this package useful and have the means, please consider a small donation!

⚡️ Features

• Add built in prompt handling.
• Add immediateEvents property.
• Add cross tab custom message broadcasting.
• New higher order component withIdleTimer.
• New provider IdleTimerProvider.
• Add syncTimers property.

✨ Enhancements

• Timeouts and Intervals are now hoisted into a web worker to bypass browser background throttles.
• Rewrite crossTab from the ground up. The new implementation is much smaller and more efficient.
• Cross Tab options simplified.
• All callbacks and methods are now memoized.

🐞 Bug Fixes

• All property values can now be dynamically updated.
• Fix getTotalActiveTime returning negative value.
• Fix sending message on closed channel error.

🔥 Code Removal

• Remove capture property.
• Remove passive property.
• Remove emitOnAllTabs property.
• Remove isLeader method.

📝 Documentation

• New documentation site.
• Add contribution guide.
• Add issue and pull request templates.

⬆️ Update Dependencies

• Updated for React 17.
• Updated all dependencies.

4.6.4

🐞 Bug Fixes

• Make ref optional in typedef.

4.6.3

✨ Enhancements

• Export a bundle for modern browsers.

🐞 Bug Fixes

• Add missing ref to TypeScript definitions.
• Fix a bug where reset would not propagate cross tab.

4.6.2

✨ Enhancements

• Allow for dynamically setting onActive and onIdle event handlers in conjunction with cross tab event reconciliation.

4.6.1

✨ Enhancements

• When emitOnAllTabs is set to true, start, reset, pause and resume will be called on all tabs.
• Calling reset will now automatically fire onActive while calling start will not. Otherwise these two methods are functionally equivalent.

🐞 Bug Fixes

• Fix an issue where the localStorage method would not call idle if there wasn't any user activity on the page.
• Fix an issue where the TabManager would not deregister itself when the tab was closed if it was not the leader tab.

🚿 Clean up

• Fix a type-o in propTypes, typescript definitions and docs.