Browser Lifecycle — Typed, framework-agnostic browser session lifecycle for modern web apps.

Published as @jayoncode/browser-lifecycle on npm.

Track page visibility, window focus, online/offline connectivity, user idle state, page lifecycle, and cross-tab coordination through one composable TypeScript API — with SSR-safe feature detection and a plugin system. Works with React, Vue, Angular, Svelte, Next.js, and vanilla JavaScript.

Install

npm install @jayoncode/browser-lifecycle

pnpm add @jayoncode/browser-lifecycle

yarn add @jayoncode/browser-lifecycle

Quick start

import { createBrowserLifecycle } from "@jayoncode/browser-lifecycle";

const lifecycle = createBrowserLifecycle({
  autoStart: true,
  debug: false,
});

lifecycle.on("page:visible", () => {
  console.log("Tab is visible again");
});

lifecycle.on("session:idle", () => {
  console.log("User went idle");
});

// Read a typed snapshot any time
const snapshot = lifecycle.getSnapshot();

// Clean up when your app unmounts
lifecycle.dispose();

Why use it

| Capability | What you get | | ---------------- | ------------------------------------------------------- | | Session core | Start, stop, pause, and inspect lifecycle state | | Visibility | page:visible / page:hidden from document visibility | | Focus | window:focus / window:blur normalization | | Connectivity | Advisory online/offline signals | | Idle | Activity-based idle detection | | Cross-tab | Leader election and tab messaging | | Plugins | Register hooks and inspect runtime diagnostics | | SSR-safe | Capability helpers that work without throwing in Node |

Documentation

• Package overview
• Quick start guide
• Configuration
• Interactive playground

Requirements

• Node.js 20+ (for tooling)
• Browsers: modern evergreen browsers; see browser support

Repository

Source, issues, and contributions:

https://github.com/itsjayoncode/joc

Package path: packages/browser-lifecycle

License

MIT © JayOnCode