FLUXLAY

useActiveElement

Reactively tracks document.activeElement and re-renders whenever focus moves anywhere within the document.

Useful for debugging or visualizing which element is currently receiving keyboard / IME input — handy on wallpapers since WebKit does not paint a focus ring on non-key windows.

Import

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

Signature

function useActiveElement(): Element | null;

Return value

The currently focused Element, or null when nothing meaningful has focus (i.e. focus is on <body> or the document itself). The hook subscribes to focusin / focusout on document, so the value updates as soon as focus moves between elements.

Usage

import { useActiveElement } from "@fluxlay/react";
 
function FocusInspector() {
  const active = useActiveElement();
  return <code>focus: {active ? active.tagName.toLowerCase() : "(none)"}</code>;
}

Notes

  • During SSR (typeof document === "undefined") the initial value is null. The hook resyncs on mount.
  • The hook treats <body> and <html> as "no active element" and returns null for them, since DOM focus parking on <body> is the default state and rarely interesting.
  • For per-element focus state with no document-wide observer cost, prefer useIsFocused.