useDocumentFocus

useDocumentFocus() returns a signal accessor that is true when the document has focus, reflecting window focus / blur events. For a plain callback use onDocumentFocus. Part of pota/use/focus.

The accessor is a reader function: call hasFocus() to read the current value once, or pass hasFocus as a reactive child / prop so the UI updates on every window focus / blur. Its initial value reflects !document.hidden.

Examples

Reflect focus state in the UI

Render a live indicator that flips when the window gains or loses focus. Click away from the page (or switch tabs) to see it update.

import { render } from 'pota'
import { useDocumentFocus } from 'pota/use/focus'

function App() {
	const hasFocus = useDocumentFocus()

	return (
		<p>
			the document is {() => (hasFocus() ? 'focused' : 'not focused')}
		</p>
	)
}

render(App)