useDocumentVisibility#

Reactive document.visibilityState via the visibilitychange event. Browser composable — import from @sigx/use-web.

TypeScript 
import { watch } from 'sigx';
import { useDocumentVisibility } from '@sigx/use-web';

const visibility = useDocumentVisibility();
watch(visibility, v => v === 'visible' && refetch()); // refetch when the tab returns

The return is a ReadSignal<DocumentVisibilityState> — 'visible' or 'hidden'.

Signature#

TypeScript 
function useDocumentVisibility(options?: ConfigurableDocument): ReadSignal<DocumentVisibilityState>;

Pass { document } to drive it from another document or a mock — see Configurable*.

SSR#

On the server the signal reads 'visible', then reflects the real document.visibilityState on mount.

See also#

  • useOnline — pair with connectivity to gate background work.
  • useNetwork — full reactive network state.
  • useIntervalFn — pause polling while the tab is hidden.