use-user-presence

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

• User visibility (tab active/inactive)
• Window focus state (window focused/blurred)
• optional:
  • Mouse interactions (clicks, movement)
  • Keyboard input
  • Touch events
  • Scrolling

Installation

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

Examples

Basic Presence Tracking

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

function UserPresent() {
  const { isPresent } = useUserPresence();

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

Advanced Presence Detection with User Activity Tracking

To activate user interaction tracking, set some number in inactivityTimeoutMs parameter when initializing the presence hook:

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

function UserPresent() {
  const { isPresent } = useUserPresence({
    inactivityTimeoutMs: 60000 // 1 minute
  });

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