browser-visibility

Tracks the Page Visibility API — whether the tab is currently visible — via the visibilitychange event.

Install

bun add @valdres/browser-visibility

Live example

Usage

import { useValue } from "valdres-react"
import { visibilityAtom, isVisibleSelector } from "@valdres/browser-visibility"

function PausableVideo() {
    const visible = useValue(isVisibleSelector)
    // pause work when the tab is hidden
    return <video data-playing={visible} />
}

Exports

Cross-framework

A global atom plus a boolean selector — works in every framework. Compose it with @valdres/browser-focus for a "user is present" signal (see @valdres/browser-presence).