FLUXLAY

useActiveElement

document.activeElement をリアクティブに購読し、ドキュメント内のどこかでフォーカスが移動するたびに再レンダリングを発火するフックです。

現在キーボード／IME 入力を受け取っている要素を可視化／デバッグするのに便利です。壁紙では WebKit が非 key ウィンドウにフォーカスリングを描画しないため、特に有用です。

インポート

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

シグネチャ

function useActiveElement(): Element | null;

戻り値

現在フォーカスを持っている Element。<body> や document 自体にフォーカスが park されている状態など、有意なフォーカス対象がない場合は null を返します。document の focusin / focusout を購読するので、要素間のフォーカス遷移に追従して即座に更新されます。

使い方

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

備考

  • SSR 中（typeof document === "undefined"）は初期値が null になります。マウント時に再同期されます。
  • <body> / <html> は "アクティブ要素なし" として扱い null を返します（DOM の既定状態であり、観測しても情報量が少ないため）。
  • 個別の要素のフォーカス状態のみ知りたい場合は、document 全体を購読しない useIsFocused の方が低コストです。