use-user-presence

A lightweight React hook for detecting user presence. This hook monitors:

• Tab visibility (tab active/inactive)
• Window focus state (window focused/blurred)
• optionally user inactivity through inactivityTimeoutMs parameter:
  • Mouse interactions (clicks, movement)
  • Keyboard input
  • Touch events
  • Scrolling

Installation

npm install use-user-presence
# or
pnpm add use-user-presence

Example

import { useUserPresence } from "use-user-presence";
import { useEffect } from "react";

function UserPresent() {
  const { isPresent } = useUserPresence({
    /* Optional parameter to also track user inactivity beside the base functionality */
    inactivityTimeoutMs: 60000, // 1 minute
  );

  useEffect(() => {
    console.log(isPresent)
  }, [isPresent]);

  return (
    <div>
      {isPresent ? (
        <span>Present</span>
      ) : (
        <span>Away</span>
      )}
    </div>
  );
}