react-idle-timer-hook-ui

💤 react-idle-timer-hook-ui

A lightweight and customizable React component that tracks user inactivity and executes a logout (or custom action) after a specified idle period. Perfect for building secure session-based apps.

🚀 Features

• Detects user inactivity from common events like mouse, keyboard, or touch
• Automatically triggers a logout or custom handler
• Customizable idle duration
• Plug-and-play: easily drop into any React app

📦 Installation

npm install react-idle-timer-hook-ui

📄 Usage

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

function App() {
  const handleLogout = () => {
    alert('You have been logged out due to inactivity.');
    // Your logout logic here (e.g. redirect or token clear)
  };

  return (
    <div>    
      <IdleTimer idleTime={5} logout={handleLogout} />
      <h1>Welcome to My App</h1>
    </div>
  );
}

export default App;

🔍 Explanation

idleTime={5}

The time (in seconds) that the user must be inactive before being considered "idle".
In this example, 5 means the user will be logged out after 5 seconds of no mouse, keyboard, or touch interaction.

logout={handleLogout}

A callback function that gets triggered when the user becomes idle for the defined duration.
You can perform any logic here, such as:

• Logging the user out
• Clearing authentication tokens
• Redirecting to the login screen