browser-focus

Wraps document.hasFocus() plus the window focus / blur events as one global atom.

Install

bun add @valdres/browser-focus

Live example

Usage

import { Component } from "@angular/core"
import { injectValue } from "valdres-angular"
import { focusAtom } from "@valdres/browser-focus"

@Component({
    selector: "focus-badge",
    template: `{{ focused.value() ? "Focused" : "Blurred" }}`,
})
export class FocusBadge {
    focused = injectValue(focusAtom) // ValueState<boolean>
}

Exports

Cross-framework

A global atom — works in every framework; only the read primitive's name changes (useValue, createValue, injectValue, watch, or store.get in plain JS). The focus / blur listeners attach on the first subscriber and detach when the last leaves. Returns true during SSR. Compose with @valdres/browser-visibility for a "user is present" signal (see @valdres/browser-presence).