react-idle-timer-hook-ui/README.md

A reusable React idle timer component with auto-logout

# 💤 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.

![npm](https://img.shields.io/npm/v/react-idle-timer-hook-ui)
![license](https://img.shields.io/npm/l/react-idle-timer-hook-ui)

---


## 🚀 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

```bash
npm install react-idle-timer-hook-ui
```

## 📄 Usage
```jsx
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