Elements

useWindowFocus

Tracks whether the browser window currently has focus as a reactive Observable<boolean>. Updates automatically when the user switches tabs, clicks away, or returns to the window. SSR-safe: returns false when document is not available.

Demo

Window Focus

blurred

Click outside this window or switch tabs to see the value change.

focused$.get() = false

import { 
const useWindowFocus: () => UseWindowFocusReturn
useWindowFocus } from "@usels/web";

function 
function Component(): JSX.Element
Component() {
  const 
const focused$: any
focused$ = 
function useWindowFocus(): UseWindowFocusReturn
Framework-agnostic reactive window focus tracker.
Exposes an Observable<boolean> that reflects whether the browser window
currently has focus. Initial value is synced from document.hasFocus() in
onMount to match SSR output and avoid hydration mismatch. Updates via
focus / blur events on window.
useWindowFocus();

  return <
JSX.IntrinsicElements.p: DetailedHTMLProps<HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>
p>Window is {
const focused$: any
focused$.
any
get() ? "focused" : "blurred"}</
JSX.IntrinsicElements.p: DetailedHTMLProps<HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>
p>;
}

import { createWindowFocus } from "@usels/web";

function Component() {
  "use scope"
  const focused$ = createWindowFocus();

  return <p>Window is {focused$.get() ? "focused" : "blurred"}</p>;
}

Pausing work when the window loses focus

const focused$ = useWindowFocus();

useObserve(() => {
  if (!focused$.get()) pausePolling();
  else resumePolling();
});

Source

View on GitHub