useDocumentVisible

useDocumentVisible() returns a read function — call it inside JSX or a derivation to re-run on every visibility change. For a one-off read use isDocumentVisible; for a plain callback use onDocumentVisible. Part of pota/use/visibility.

Call it within a reactive scope (a component body, effect, or root). The subscription to visibilitychange is created on first use through the surrounding scope and torn down automatically when that scope is cleaned up; multiple consumers share the one underlying listener. Calling it outside any scope leaks the listener.

Returns: () => boolean — a read function returning true while the document is visible.

Examples

Reactive visibility state

Reads visible() inside a derivation so the text updates whenever the tab is shown or hidden. Because useDocumentVisible() is called in the component body, its listener is registered and cleaned up with the component.

import { render } from 'pota'
import { useDocumentVisible } from 'pota/use/visibility'

function App() {
	const visible = useDocumentVisible()

	return (
		<p>
			Tab is currently{' '}
			<strong>{() => (visible() ? 'visible' : 'hidden')}</strong>.
			Switch to another tab and back to see the value change.
		</p>
	)
}

render(App)