useIdle Hook

useIdle is a React hook designed to detect user inactivity or idle time in applications. It triggers a state change after a specified period of inactivity, making it useful for actions like auto-logout or activity pausing.

Features

- Idle Time Detection: Tracks user inactivity and changes state after a set period.
- Activity Monitoring: Resets the idle timer upon user interactions like mouse movement, keypresses, and scrolling.
- SSR Compatibility: Safely handles server-side rendering by checking for the window object.
- Configurable Idle Duration: Allows setting a custom duration to define user inactivity.

Installation

$3

``bash
npm install @custom-react-hooks/use-idle
`

or

`bash
yarn add @custom-react-hooks/use-idle
`

$3

`sh
npm install @custom-react-hooks/all
`

or

`sh
yarn add @custom-react-hooks/all
`

Importing the Hook

The useIdle hook must be imported using a named import as shown below:

Named Import:
`javascript
import { useIdle } from '@custom-react-hooks/use-idle';
`
This approach ensures that the hook integrates seamlessly into your project, maintaining consistency and predictability in how you use our package.

Usage

`typescript
import React from 'react';
import { useIdle } from '@custom-react-hooks/all';
import { MoonIcon, SunIcon } from '@heroicons/react/24/solid';


const IdleComponent = () => {
const isIdle = useIdle(1000);

return (


export default IdleComponent;
`

In this example, the hook is used to detect when the user has been idle for more than 3 seconds.

API Reference

$3

- idleTime: The time in milliseconds to wait before considering the user as idle.

$3

Contributions to enhance useIdle` are welcome. Feel free to submit issues or pull requests to the repository.