useIsFocused

Tracks whether a specific element currently has DOM focus, exposed as a reactive boolean.

Wallpaper windows are never the OS key window, so WebKit suppresses the visual :focus / :focus-visible styling that authors normally rely on. To render a focus ring on a wallpaper you have to mirror focus state into React and toggle a class manually. useIsFocused encapsulates that pattern.

Import

import { useIsFocused } from "@fluxlay/react";

Signature

function useIsFocused(ref: RefObject<HTMLElement | null>): boolean;

Parameters

Argument	Type	Description
`ref`	`RefObject<HTMLElement \| null>`	A ref pointing to the element whose focus state you want to observe. The hook subscribes once `ref.current` is set.

Return value

true while the referenced element has DOM focus, false otherwise. The initial value is seeded from document.activeElement, so the result is correct even when the element was already focused at mount time.

Usage

import { useIsFocused } from "@fluxlay/react";
import { useRef } from "react";
 
function SearchBox() {
  const ref = useRef<HTMLInputElement>(null);
  const focused = useIsFocused(ref);
 
  return <input ref={ref} data-focused={focused} style={{ outline: focused ? "2px solid #4f8cff" : "none" }} />;
}

Notes

The hook listens to focus / blur directly on the referenced element, so it does not fire for descendant focus moves. Pair it with useActiveElement when you need a document-wide view.
Because focus rings are not painted by the OS on wallpaper windows, this hook is the recommended way to give an in-wallpaper input visible focus styling.