リファレンス

コンポーネント

• ImpressionArea — ImpressionArea は、特定の DOM 要素が画面に表示されている時間を計測し、 要素がビューポートに入ったときや出たときにコールバックを実行するコンポーネントです。 useImpressionRef フックを使用して、要素の表示状態を追跡します。
• Separated — Separated は、各子要素の間に指定したコンポーネントを挿入するコンポーネントです。 リスト内に区切り線や余白など、繰り返し表示する要素を追加するときに便利です。
• SwitchCase — SwitchCase は、switch-case 文と同様に、与えられた値に基づいてコンポーネントを 宣言的にレンダリングするコンポーネントです。特定の状態に応じて、異なるコンポーネントを 条件付きでレンダリングするときに便利です。

フック

• useAsyncEffect — useAsyncEffect は、React コンポーネントで非同期の副作用を扱うための React フックです。 useEffect と同じクリーンアップのパターンに従いながら、非同期処理を安全に扱います。
• useAvoidKeyboard — useAvoidKeyboard は、画面下部に固定された要素がソフトウェアキーボードと重ならないようにする React フックです。 position: fixed の要素に適用できる CSS スタイルを返し、 キーボードが表示されたときに要素をキーボードの上へ滑らかに移動させます。
• useBodyScrollLock — useBodyScrollLock は、コンポーネントがマウントされている間、body のスクロールをロックする React フックです。 マウント時に自動でロックし、アンマウント時に解除します。 モーダルやドロワーなど、背後のページのスクロールを防ぐ必要があるオーバーレイコンポーネントに便利です。
• useBooleanState — useBooleanState は、真偽値の状態管理を簡単にする React フックです。 状態を true にする関数、false にする関数、値を切り替える関数を提供します。
• useCallbackOncePerRender — useCallbackOncePerRender は、何度呼び出されてもコールバック関数を一度だけ実行する React フックです。 コンポーネントが再レンダリングされても繰り返すべきでない、一度限りの処理に便利です。
• useConditionalEffect — useConditionalEffect は、条件を判定する関数に基づいてエフェクトを実行する React フックです。 依存関係の変化だけでなく、より細かくエフェクトの実行タイミングを制御できます。
• useControlledState — useControlledState は、制御された状態と非制御の状態の両方を扱える React フックです。 状態を value に渡すと制御された状態になり、defaultValue に渡すと非制御の状態になります。 value と defaultValue の両方を渡した場合は、value が優先されます。
• useCounter — useCounter は、増加、減少、リセットの操作とともに数値カウンターの状態を管理する React フックです。 必要に応じて最小値と最大値を指定し、カウンターの範囲を制限できます。
• useDebounce — useDebounce は、渡されたコールバック関数をデバウンスする React フックです。 関数の実行を遅らせ、複数の呼び出しを一度にまとめることで、イベント処理を最適化します。
• useDebouncedCallback — useDebouncedCallback は、渡されたコールバック関数をデバウンスする React フックです。 関数の実行を遅らせ、複数の呼び出しを一度にまとめることで、イベント処理を最適化します。
• useDebouncedValue — useDebouncedValue は、渡された値をデバウンスした値として返す React フックです。 状態は引き続き呼び出し側で管理し、このフックは戻り値がその状態に追従するタイミングだけを遅らせます。 戻り値は最後の変更から wait ミリ秒後に更新されるため、頻繁に変わる状態から 検索クエリやバリデーション用の入力値を得る場合に便利です。
• useDoubleClick — useDoubleClick は、シングルクリックとダブルクリックのイベントを区別する React フックです。 シングルクリックのコールバックの実行を指定時間だけ遅らせ、その間に 2 回目のクリック（つまりダブルクリック）が発生した場合は、その実行をキャンセルします。
• useGeolocation — useGeolocation は、ユーザーの位置情報を取得・追跡する React フックです。 ブラウザーの Geolocation API を使い、一度限りの位置情報の取得と継続的な追跡の両方に対応します。
• useImpressionRef — useImpressionRef は、特定の DOM 要素が画面に表示されている時間を計測し、要素がビューポートに入ったときや出たときにコールバックを実行する React フックです。 IntersectionObserver と Visibility API を使って、要素の表示状態を追跡します。
• useInputState — useInputState は、入力値の状態を管理し、必要に応じて値を変換できる React フックです。 返される onChange ハンドラーは、<input> と <textarea> の両方の要素で使用できます。
• useIntersectionObserver — useIntersectionObserver は、指定した DOM 要素が画面に表示されているかどうかを検出する React フックです。 IntersectionObserver API を使用して、要素がビューポートに入ったときや出たときにコールバックを実行します。
• useInterval — useInterval は、指定した間隔で関数を実行する React フックです。 タイマー、データのポーリング、その他の定期的な処理に役立ちます。
• useIsClient — useIsClient は、クライアント側の環境でのみ true を返す React フックです。 主にクライアント側のレンダリングとサーバーサイドレンダリング（SSR）を区別するために使用します。 状態が true になるのは、クライアント側の環境でコンポーネントがマウントされた後だけです。
• useIsomorphicLayoutEffect — useIsomorphicLayoutEffect は、サーバーサイドレンダリング（SSR）中に警告を発生させずに、ブラウザーで useLayoutEffect を実行する React フックです。 SSR 中には同期的に計測や変更ができる DOM が存在しないため、React 18 以前では useLayoutEffect を使用すると警告が発生します。 エフェクトはブラウザーでのみ実行されます。 このフックは警告を避けるだけで、サーバーの出力をクライアントと一致させることはありません。 React 19 では警告が発生しなくなったため、useLayoutEffect を直接使用できます。
• useKeyboardHeight — useKeyboardHeight は、画面上のキーボードの高さを追跡する React フックです。 現在のキーボードの高さをピクセル単位で返します。この値は、 キーボードの表示、非表示、サイズ変更に応じて自動的に更新されます。
• useList — 配列を状態として管理する React フックです。 効率的な状態管理と、参照が安定したアクション関数を提供します。
• useLoading — useLoading は、Promise の読み込み状態の管理を簡単にする React フックです。 非同期処理が進行中かどうかを追跡する状態と、読み込み状態を自動的に管理する関数を提供します。
• useLongPress — useLongPress は、要素が指定した時間押し続けられたことを検出する React フックです。 マウスイベントとタッチイベントの両方を処理するため、デスクトップ端末とモバイル端末で一貫した動作を実現できます。
• useMap — キーと値のペアを格納する Map を状態として管理する React フックです。 効率的な状態管理と、参照が安定したアクション関数を提供します。
• useNetworkStatus — useNetworkStatus は、Network Information API にアクセスできる React フックです。 接続の種類、品質、速度、ユーザーのデータ節約設定など、ネットワーク接続の情報をそのまま提供します。 API に対応していない場合（Safari、Firefox など）、すべてのプロパティは undefined になります。
• useOutsideClickEffect — useOutsideClickEffect は、指定したコンテナーの外側でクリックイベントが発生したときにコールバックを実行する React フックです。 外側のクリックでモーダル、ドロップダウン、ツールチップなどの UI コンポーネントを閉じる場合に役立ちます。
• usePageVisibility — usePageVisibility は、ページの表示状態の変化を検出する React フックです。 Page Visibility API を使用して、ユーザーによるタブの切り替えやブラウザーの最小化を監視します。 アニメーション、動画、バックグラウンド処理を一時停止・再開し、パフォーマンスとユーザー体験を向上させる場合に役立ちます。
• usePreservedCallback — usePreservedCallback は、コールバック関数の参照を安定させながら、 常に最新の状態や props にアクセスできるようにする React フックです。不要な再レンダリングを防ぎ、 子コンポーネントにコールバックを渡す場合やイベントリスナーを扱う場合の依存関係の管理を簡単にします。
• usePreservedReference — usePreservedReference は、値が変わっていない場合にその参照を維持しながら、最新の状態を安全に使えるようにする React フックです。 不要な再レンダリングを防ぎ、常に最新のデータにアクセスできます。
• usePrevious — usePrevious は、渡された状態の前の値を返す React フックです。 状態が変わらずに再レンダリングされた場合、前の値をそのまま保持します。 状態がオブジェクトの場合や、変更の検出方法をカスタマイズしたい場合は、compare 関数を指定できます。 デフォルトでは、prev === next を使って状態の変化を検出します。
• useRefEffect — useRefEffect は、特定の DOM 要素への参照を設定し、その要素が変わるたびにコールバックを実行する React フックです。 要素が変わるたびにクリーンアップ関数を呼び出し、メモリリークを防ぎます。
• useSafeAreaInset — useSafeAreaInset は、セーフエリアのインセットの変化を追跡する React フックです。 画面の向きが変わったとき（縦向きから横向きへの変更など）に自動更新されるセーフエリアのインセットを返します。
• useScrollDirection — useScrollDirection は、スクロール方向を検出する React フックです。 スクロール方向（上／下）と現在のスクロール位置を返します。 パフォーマンスのため、デフォルトでは 50ms 間隔でスロットリングします。
• useSet — Set を状態として管理する React フックです。 効率的な状態管理と、参照が安定した操作関数を提供します。
• useStorageState — useStorageState は、useState と同様に動作し、状態の値をブラウザーのストレージに永続化する React フックです。 ページを再読み込みしても値が保持され、localStorage を使う場合はタブ間で共有できます。
• useThrottle — useThrottle は、コールバック関数をスロットリングする React フックです。 スクロールやリサイズのイベントを処理する場合など、関数の呼び出し頻度を制限したいときに便利です。
• useThrottledCallback — useThrottledCallback は、渡されたコールバック関数をスロットリングして返す React フックです。 スロットリングされたコールバックは、指定した間隔につき最大 1 回だけ呼び出されます。
• useThrottledValue — useThrottledValue は、渡された値をスロットリングして返す React フックです。 状態は引き続き呼び出し元が管理し、戻り値は wait ミリ秒につき最大 1 回、その状態に追従します。 スクロール位置、ポインターの位置、リサイズ時の要素サイズに応じて、負荷の高いレンダリングを行う場合に便利です。
• useTimeout — useTimeout は、指定した時間が経過した後にコールバック関数を実行する React フックです。 React のライフサイクルに合わせて setTimeout を管理し、アンマウント時や依存関係が変わったときにクリーンアップを行います。
• useToggle — useToggle は、真偽値の状態管理を簡単にする React フックです。 状態を true と false の間で切り替える関数を提供します。
• useVisibilityEvent — useVisibilityEvent は、ドキュメントの表示状態の変化を監視し、コールバックを呼び出す React フックです。
• useVisualViewport — useVisualViewport は、Visual Viewport の変化を追跡する React フックです。 モバイル WebView で実際に見えている領域を返します。この領域は、キーボードの表示やユーザーのズーム、スクロールによって変化します。

ユーティリティ

• buildContext — buildContext は、React のコンテキストを定義する際の繰り返しのコードを減らすヘルパー関数です。
• disableBodyScrollLock — disableBodyScrollLock は、body のスクロールロックを解除するユーティリティ関数です。 enableBodyScrollLock によるスクロールロックを解除し、保存されたスクロール位置に戻します。
• enableBodyScrollLock — enableBodyScrollLock は、body のスクロールをロックするユーティリティ関数です。 固定配置を適用して body のスクロールを防ぎます。 モーダルやドロワーなどのオーバーレイコンポーネントを開く際に便利です。
• getKeyboardHeight — getKeyboardHeight は、現在の画面上のキーボードの高さをピクセル単位で返すユーティリティ関数です。
• getSafeAreaInset — getSafeAreaInset は、すべてのセーフエリアのインセットをピクセル単位で含むオブジェクトを返すユーティリティ関数です。
• isAndroid — isAndroid は、現在のデバイスで Android が動作しているかどうかを判定するユーティリティ関数です。
• isIOS — isIOS は、現在のデバイスで iOS または iPadOS が動作しているかどうかを判定するユーティリティ関数です。
• isKeyboardVisible — isKeyboardVisible は、画面上のキーボードが現在表示されているかどうかを確認するユーティリティ関数です。
• isServer — isServer は、コードがサーバー上で実行されているかどうかを確認するユーティリティ関数です。 window が未定義の SSR（サーバーサイドレンダリング）環境では true を返し、 クライアント側の環境では false を返します。
• mergeProps — mergeProps は、複数の props オブジェクトを 1 つのオブジェクトにマージするユーティリティ関数です。 className、style、function の各プロパティのマージを処理します。
• mergeRefs — この関数は複数の ref（RefObject または RefCallback）を受け取り、渡されたすべての ref を更新する単一の ref を返します。 1 つの要素に複数の ref を渡す必要がある場合に便利です。 コールバック ref がクリーンアップ関数を返す場合（React 19）、マージされた ref もクリーンアップ関数を返し、ref が切り離される際にすべてのクリーンアップを実行します。
• subscribeKeyboardHeight — subscribeKeyboardHeight は、画面上のキーボードの高さの変化を購読するユーティリティ関数です。