usePageVisibility

Browser & device

Track whether the browser tab is visible or hidden, via the Page Visibility API.

Install

$ npm install @usefy/use-page-visibility

Quick start

usePageVisibility.tsx

import { usePageVisibility } from "@usefy/use-page-visibility";

function TabStatus() {
  const visible = usePageVisibility();
  return <span>{visible ? "👀 Active" : "💤 Background"}</span>;
}

API reference

`usePageVisibility(onChange?): boolean`

Returns true while the page is in the foreground and false while it is hidden. The value updates on the document visibilitychange event.

Parameter	Type	Description
`onChange`	`(visible: boolean) => void` \| `undefined`	Optional. Fired on every visibility transition with the new boolean value. Never fires on mount. Read through a ref (changing it does not re-subscribe).

Returns: boolean — true when visible, false when hidden. On the server (or any environment without a document) it returns true.

Exported types & helpers

import {
  usePageVisibility,
  getPageVisibility,          // read a one-off boolean snapshot outside React
  getVisibilityState,         // read the raw "visible" | "hidden" state
  isPageVisibilitySupported,  // feature detection
  SERVER_PAGE_VISIBILITY,     // the inert server value (true)
  type PageVisibilityState,   // "visible" | "hidden"
  type OnVisibilityChange,    // (visible: boolean) => void
  type UsePageVisibilityReturn,
} from "@usefy/use-page-visibility";

Go deeper

This page is the quick reference. For every example, prop, and edge case, read the full README — or open Storybook to change props live.

Full README →Open in Storybook →