shadcn-hooks

shadcn-hooks

このスキルは、React プロジェクトで shadcn-hooks を使用する際の、選択と実装のガイドです。要件に最適なフックを対応付け、適切な使用パターンを適用し、実装を簡潔で保守しやすく、高速に保つため、独自のコードよりフックベースの解決策を優先します。

適用する場面

• React／Next.js でのユーザーの開発作業を支援する際は、常にこのスキルを適用してください。
• 要件を満たせる shadcn-hooks の関数があるか、必ず最初に確認してください。
• 可読性、保守性、パフォーマンスを向上させるため、カスタムコードより shadcn-hooks を優先してください。
• 要件に最適なフックを対応付け、フックの呼び出しルールに従ってください。
• 以下の関数一覧にある Invocation フィールドを参照してください。たとえば、次のとおりです。
  • AUTO：該当する場合は自動的に使用します。
  • EXTERNAL：ユーザーが必要な外部依存関係をすでにインストールしている場合にのみ使用します。そうでない場合は再検討し、本当に必要な場合に限ってインストールを依頼してください。

インストール

shadcn CLI の使用を推奨します。プロジェクトに必要なフックだけをコピーでき（実行時の追加依存関係はなく、ツリーシェイキングにも対応しています）。

# Install a single hook (recommended)
npx shadcn@latest add @shadcnhooks/use-boolean

# Install multiple hooks at once
npx shadcn@latest add @shadcnhooks/use-boolean @shadcnhooks/use-mount @shadcnhooks/use-debounce

または、npm パッケージ全体をインストールできます（すべてのフックが含まれます）。

npm install shadcn-hooks

shadcn CLI を使用する場合は、ローカルパスからインポートしてください（例：import { useBoolean } from "@/hooks/use-boolean"）。 npm パッケージを使用する場合は、"shadcn-hooks" からインポートしてください（例：import { useBoolean } from "shadcn-hooks"）。

関数

以下に記載するすべての関数は、shadcn-hooks の一部です。各セクションでは、機能に基づいて関数を分類しています。

重要：各関数の項目には、簡単な Description と詳しい Reference が含まれています。関数を使用する際は、使用方法と型宣言について、必ず ./references にある対応するドキュメントを参照してください。

状態

関数	説明	呼び出し
useBoolean	set、setTrue、setFalse、toggle ヘルパーを備えたブール値の状態	AUTO
useControllableValue	制御コンポーネントと非制御コンポーネントの両方のパターンに対応します	AUTO
useCounter	inc、dec、set、reset ヘルパーを備えたカウンター	AUTO
useDebounce	デバウンス処理されたリアクティブな値	AUTO
useResetState	初期値に戻す reset 関数を備えた状態	AUTO
useThrottle	スロットル処理されたリアクティブな値	AUTO
useToggle	ユーティリティアクションを使って2つの値を切り替えます	AUTO

高度な機能

機能	説明	呼び出し
useCreation	依存関係を深く比較するメモ化されたファクトリー	AUTO
useCustomCompareEffect	カスタムの依存関係比較関数を使う useEffect	AUTO
useLatest	常に最新の値を保持する Ref	AUTO
useLockFn	非同期関数の並行実行を防止	AUTO
useMemoizedFn	同一性が変わらない安定した関数参照	AUTO
usePrevious	state の前の値を返す	AUTO

ライフサイクル

機能	説明	呼び出し
useDebounceEffect	デバウンスされた useEffect	AUTO
useDebounceFn	run、cancel、flush で制御するデバウンスされた関数	AUTO
useDeepCompareEffect	依存関係を深く比較する useEffect	AUTO
useDeepCompareLayoutEffect	依存関係を深く比較する useLayoutEffect	AUTO
useEffectEvent	React 19 の useEffectEvent のポリフィル	AUTO
useEffectWithTarget	対象の DOM 要素を依存関係としてサポートする useEffect	AUTO
useInterval	自動クリーンアップ機能付きのインターバルタイマー	AUTO
useIsHydrated	クライアントのハイドレーション完了後に true を返す	AUTO
useIsomorphicLayoutEffect	クライアントでは useLayoutEffect、サーバーでは useEffect	AUTO
useMount	コンポーネントのマウント時にのみコールバックを実行する	AUTO
useThrottleEffect	スロットルされた useEffect	AUTO
useThrottleFn	run、cancel、flush で制御するスロットルされた関数	AUTO
useTimeout	自動クリーンアップ機能付きのタイムアウトタイマー	AUTO
useUnmount	コンポーネントのアンマウント時にクリーンアップを実行する	AUTO
useUpdate	コンポーネントを強制的に再レンダリングする関数を返す	AUTO
useUpdateEffect	最初のレンダーをスキップする useEffect	AUTO

ブラウザー

関数	説明	呼び出し
useActiveElement	現在フォーカスされている要素を追跡します	AUTO
useBattery	バッテリー残量と充電情報をリアクティブに取得します	AUTO
useClickAnyWhere	ドキュメント内の任意の場所でクリックイベントを監視します	AUTO
useClickAway	対象要素の外側でのクリックを検出します	AUTO
useClipboard	読み取り／書き込みに対応した Clipboard API をリアクティブに利用します	AUTO
useDocumentVisibility	ドキュメントの表示状態をリアクティブに取得します	AUTO
useElementSize	ResizeObserver を使って要素のサイズをリアクティブに取得します	AUTO
useEventListener	自動クリーンアップに対応した宣言的なイベントリスナー	AUTO
useFps	FPS（フレーム毎秒）をリアクティブに計測します	AUTO
useFullscreen	Fullscreen API をリアクティブに利用します	AUTO
useHash	リアクティブな window.location.hash	AUTO
useHover	要素のホバー状態をリアクティブに取得します	AUTO
useInViewport	IntersectionObserver を使って要素の表示状態を追跡します	AUTO
useIsMatchMedia	CSS メディアクエリの一致状態をリアクティブに取得します	AUTO
useIsOnline	ネットワークのオンライン／オフライン状態をリアクティブに取得します	AUTO
useMouse	マウス／タッチのポインター座標をリアクティブに取得します	AUTO
useNetwork	ネットワーク接続情報をリアクティブに取得します	AUTO
useOs	ブラウザーのオペレーティングシステムをリアクティブに検出します	AUTO
useScrollLock	対象要素のスクロールをロック／解除します	AUTO
useTextSelection	バウンディング矩形を含むテキスト選択状態をリアクティブに取得します	AUTO
useTitle	ドキュメントタイトルをリアクティブに管理します	AUTO

開発

関数	説明	呼び出し
useWhyDidYouUpdate	レンダリング間で変更された props をログに記録します（デバッグ専用）	AUTO

外部

関数	説明	呼び出し
useMcp	use-mcp の Model Context Protocol クライアントフック	外部
useQuery	@tanstack/react-query のデータ取得フック	外部
useStickToBottom	use-stick-to-bottom のスクロール固定動作	外部
useSWR	swr のデータ取得フック	外部