useIsFocused

特定の要素が DOM フォーカスを持っているかを真偽値でリアクティブに購読するフックです。

壁紙ウィンドウは OS の key window にならないため、WebKit は通常の :focus / :focus-visible スタイルを描画しません。壁紙でフォーカスリングを出すには、フォーカス状態を React の state にミラーしてクラス／スタイルを手動で切り替える必要があります。useIsFocused はそのパターンをカプセル化したものです。

インポート

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

シグネチャ

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

引数

引数	型	説明
`ref`	`RefObject<HTMLElement \| null>`	フォーカスを観測したい要素の ref。`ref.current` がセットされた時点で subscribe します。

戻り値

参照している要素が DOM フォーカスを持っている間は true、それ以外は false。マウント時に既にフォーカスが当たっているケースに対応するため、初期値は document.activeElement から計算されます。

使い方

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" }} />;
}

備考

対象要素の focus / blur を直接購読するため、子孫要素のフォーカス遷移までは拾いません。document 全体を見たい場合は useActiveElement と組み合わせてください。
壁紙では OS がフォーカスリングを描画しないため、壁紙内入力欄の視覚的フォーカス表現にはこのフックの利用を推奨します。