In modern web applications, it’s often necessary to detect when the user is idle or inactive. This can be useful in scenarios such as automatically logging out users after a period of inactivity or pausing certain actions when the user is not actively interacting with the application.

In this blog post, we will learn how to create a custom React hook called useIdleDetection that detects the user’s idle state.

Table of Contents

• Introduction
• Detecting User Idle State
• Creating the useIdleDetection Hook
• Using the useIdleDetection Hook
• Conclusion

Introduction

Idle detection involves determining whether the user has been inactive for a certain period of time. In most cases, idle time is defined as a certain duration of inactivity, typically measured in seconds or minutes. When the idle time exceeds the defined threshold, we can consider the user to be idle.

Detecting User Idle State

To detect the user’s idle state, we can listen to certain events such as mouse movements, keyboard inputs, or touch events. Whenever any of these events occur, we reset a timer and start measuring idle time again. If no events occur within the defined threshold time, we consider the user as idle.

Creating the useIdleDetection Hook

Let’s start by creating a new file called useIdleDetection.js and define our useIdleDetection hook:

import { useEffect, useState } from 'react';

const useIdleDetection = (idleTime = 300000) => {
  const [isIdle, setIsIdle] = useState(false);

  useEffect(() => {
    let idleTimer;
    const resetIdleTimer = () => {
      clearTimeout(idleTimer);
      idleTimer = setTimeout(() => {
        setIsIdle(true);
      }, idleTime);
    };

    const handleIdleEvents = () => {
      setIsIdle(false);
      resetIdleTimer();
    };

    window.addEventListener('mousemove', handleIdleEvents);
    window.addEventListener('keydown', handleIdleEvents);
    window.addEventListener('touchstart', handleIdleEvents);

    resetIdleTimer();

    return () => {
      clearTimeout(idleTimer);
      window.removeEventListener('mousemove', handleIdleEvents);
      window.removeEventListener('keydown', handleIdleEvents);
      window.removeEventListener('touchstart', handleIdleEvents);
    };
  }, [idleTime]);

  return isIdle;
};

export default useIdleDetection;

In this code, we use the useEffect hook to set up event listeners for mouse movements, keyboard inputs, and touch events. Whenever any of these events occur, we reset the idle timer.

After the defined idleTime has passed without any events, we set isIdle to true. We also clean up the event listeners when the component unmounts.

Using the useIdleDetection Hook

Now that we have our custom useIdleDetection hook, we can use it in any component:

import React from 'react';
import useIdleDetection from './useIdleDetection';

const MyComponent = () => {
  const isIdle = useIdleDetection();

  return (
    <div>
      {isIdle ? <p>User is idle</p> : <p>User is active</p>}
    </div>
  );
};

export default MyComponent;

By importing and using the useIdleDetection hook, we can easily determine whether the user is idle or active and display a relevant message based on the state.

Conclusion

In this blog post, we learned how to create a custom useIdleDetection hook in React for detecting the user’s idle state. By leveraging event listeners and a timer, we were able to accurately determine when the user becomes idle. This hook can be used in various scenarios where idle state detection is required, providing a flexible and reusable solution.

Thank you for reading!

#react #javascript