use-bn-idle

User Idle / Session Timeout Detector - React Hook

Installation

npm install use-bn-idle

How to detect User Idleness/Session Timeout in React

Import the useBnIdle hook in your component. It returns two functions, startTimer and stopTimer.

The startTimer function is used to start the user idle detection based on seconds that we pass as an argument

The stopTimer function is used to stop the user idle detection (manually).

The expired callback function as a parameter for the useBnIdle hook gets triggered if the user is inactive for a certain period of time that we specified in startTimer function.

    import {useBnIdle} from 'use-bn-idle';

    const App = () => {
      const [startTimer, stopTimer] = useBnIdle(() => {
        //Will execute if the user is idle for a certain period of time.
        //You can write logic like showing popup or log out the user.
        console.log('Expired: Session Timeout');
      })
      
      useEffect(() => {
        // start the user idle detection
        startTimer(60); //passed 60 seconds as argument.
      })

      return <div>
        <button onClick={stopTimer}>Stop Detection</button>
      </div>
    }

Return Values from the hook

Return Values	Type	Description
startTimer(timeoutInSeconds)	Function	Used to start the user idle detection. It accepts seconds as a parameter.
stopTimer()	Function	Used to stop the user idle detection.

Input parameters for the hook

Parameters	Type	Description
expired	function	A callback function that executes if the user is idle for a specified time that we mentioned in startTimer.

Restart the user idle detection.

If the user is idle for a certain period of time based on the parameter timeoutInSeconds of startTimer function, then the expired function gets invoked and then the user idle detection will stop automatically.

In order to restart the user idle detection, you should invoke the startTimer(timoutInSeconds) function again.