DEV Community

Cover image for ifvisible.js: Track Active, Idle, and Hidden Page States
jQueryScript
jQueryScript

Posted on

ifvisible.js: Track Active, Idle, and Hidden Page States

ifvisible.js: a JavaScript library that detects if a user is actively viewing a page or has stepped away.

Key features:

  • Three page states: active, idle, and hidden
  • Named events for blur, focus, idle, wakeup, freeze, and resume
  • Configurable idle timeout (default: 30 seconds)
  • Smart intervals that pause automatically when the user goes idle
  • SSR-safe imports with bundled TypeScript types
  • Per-instance teardown via destroy() for SPA route changes

Works via npm, CDN, or browser global. Useful for pausing animations, stopping data polling, and triggering session timeouts based on real user attention.

👉 Blog Post

👉 GitHub Repo

👉 Live Demo

Top comments (0)