# useActiveElement `document.activeElement` をリアクティブに購読し、ドキュメント内のどこかでフォーカスが移動するたびに再レンダリングを発火するフックです。現在キーボード／IME 入力を受け取っている要素を可視化／デバッグするのに便利です。壁紙では WebKit が非 key ウィンドウにフォーカスリングを描画しないため、特に有用です。 ## インポート ```tsx import { useActiveElement } from "@fluxlay/react"; ``` ## シグネチャ ```tsx function useActiveElement(): Element | null; ``` ## 戻り値現在フォーカスを持っている `Element`。`` や document 自体にフォーカスが park されている状態など、有意なフォーカス対象がない場合は `null` を返します。`document` の `focusin` / `focusout` を購読するので、要素間のフォーカス遷移に追従して即座に更新されます。 ## 使い方 ```tsx import { useActiveElement } from "@fluxlay/react"; function FocusInspector() { const active = useActiveElement(); return focus: {active ? active.tagName.toLowerCase() : "(none)"}; } ``` ## 備考 - SSR 中（`typeof document === "undefined"`）は初期値が `null` になります。マウント時に再同期されます。 - `` / `` は "アクティブ要素なし" として扱い `null` を返します（DOM の既定状態であり、観測しても情報量が少ないため）。 - 個別の要素のフォーカス状態のみ知りたい場合は、document 全体を購読しない [`useIsFocused`](/ja/studio/developer/reference/sdk/use-is-focused.md) の方が低コストです。