Founding price: $35, then $99 after 23:59 UTC on 4 November, then $99
Get ProReport whether the tab is visible or hidden, so you can pause polling, video and animation when nobody is looking.
This item has no props to tune. Use the lens above to change theme, density, direction and more.
Use it to stop work that nobody sees: polling, auto-advancing carousels, timers that draw, video or audio visuals, and to refresh data when the person returns.
Do not use it to track time on page for analytics without consent, and do not rely on it to run work after the tab is hidden; browsers throttle hidden tabs.
import { usePageVisibility } from "@/hooks/use-page-visibility"const visibility = usePageVisibility()
useInterval(refresh, visibility === "visible" ? 10_000 : null)usePageVisibility(): "visible" | "hidden"
Returns document.visibilityState (the rare "prerender" state is reported as "hidden"), and "visible" on the server and during hydration. It listens to visibilitychange.
A hook has no markup. Pausing media when the tab is hidden is fine, but do not pause audio the person expects to keep playing in the background.
The hook ships with renderHook tests (use-page-visibility.test.ts) covering its behaviour, cleanup on unmount and server-safe defaults. It is safe to render on the server.