# useIsFocused

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

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

## インポート

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

## シグネチャ

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

## 引数

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

## 戻り値

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

## 使い方

```tsx
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`](/ja/studio/developer/reference/sdk/use-active-element.md) と組み合わせてください。
- 壁紙では OS がフォーカスリングを描画しないため、壁紙内入力欄の視覚的フォーカス表現にはこのフックの利用を推奨します。