mcpField
T
tanstack-hotkeys

tanstack-hotkeys

github.com/oakoss開発20170 回インストール10 週間前に更新
リポジトリ

tanstack-hotkeys について

TanStack Hotkeys は、React アプリを開発する人向けの型安全なキーボードショートカットライブラリです。フック、キーシーケンス、ショートカット録画、押下状態の追跡、プラットフォームに応じた表示形式を備えています。

主な機能

  1. 01型安全なホットキー用フック
  2. 02クロスプラットフォーム対応の Mod キー
  3. 03複数キーのシーケンス
  4. 04ショートカットの録画
  5. 05押下中のキーとコードの追跡
  6. 06プラットフォーム対応の表示形式

活用シーン

  1. 01React アプリへのキーボードショートカット追加
  2. 02ユーザー定義ショートカットの録画
  3. 03押下中の修飾キーの検出
  4. 04Vim 風キーシーケンスの実装

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/oakoss/agent-skills --skill tanstack-hotkeys

インストール後、Claude Code で/tanstack-hotkeysを入力して読み込まれたか確認します。

同梱ファイル

SKILL.md と一緒にインストールされる参考資料やスクリプト。

references/
formatting-and-display.md
react-hooks.md
sequences-and-recording.md

詳細

TanStack Hotkeys

概要

TanStack Hotkeys は、テンプレート文字列によるバインディング、クロスプラットフォーム対応の Mod キー抽象化（macOS では Cmd、Windows/Linux では Ctrl）、SSR に適したユーティリティを備えた、React 向けの型安全なキーボードショートカットライブラリです。単一のホットキー、複数キーのシーケンス、ショートカットの記録、リアルタイムのキー状態追跡に使えるフックに加え、プラットフォームに応じた表示形式も提供します。

使用する場面： React アプリにキーボードショートカットを追加する場合、ユーザー定義のホットキーを記録する場合、押し続けられている修飾キーを検出する場合、プラットフォーム固有のショートカットラベルを表示する場合、Vim スタイルのキーシーケンスを実装する場合。

使用しない場面： ラッパーなしの非 React アプリ（コアパッケージはありますが、主な対象は React です）、完全なキーマップ管理が必要な複雑な入力処理（専用のキーマップライブラリを検討してください）。

クイックリファレンス

パターンAPI要点
単一のホットキーuseHotkeyMod は Cmd/Ctrl を抽象化し、組み合わせではデフォルトで既定の動作を防止
複数キーのシーケンスuseHotkeySequenceg g のような Vim スタイルのシーケンス。タイムアウトを設定可能
ショートカットの記録useHotkeyRecorderユーザー定義のショートカット。記録の開始／停止／キャンセルに対応
キーの押下状態を検出useKeyHold特定のキーの状態を真偽値で返す。再レンダリングを最適化
押下中のすべてのキーを追跡useHeldKeys現在押されているキー名の配列
押下中のキーコードを追跡useHeldKeyCodesキー名と物理的な event.code 値のマップ
グローバルなデフォルトHotkeysProviderすべてのフックのデフォルトオプションを設定。フックごとの上書きも可能
表示用にフォーマットformatForDisplayプラットフォームに対応。macOS では記号、Windows/Linux ではテキスト
要素にスコープを限定target オプション＋refフォーカスするには対象要素に tabIndex が必要
条件付きホットキーenabled オプションアンマウントせずに動的に有効／無効を切り替え

よくある間違い

間違い正しいパターン
スコープ対象の要素に tabIndex がないフォーカス用に target ref を使う要素に tabIndex={-1}（または 0）を追加する
Mod ではなく Ctrl を使うクロスプラットフォーム対応には Mod を使う。Mac では Cmd、Win/Linux では Ctrl に対応
入力欄内でもホットキーが発火すると想定するignoreInputs はデフォルトで適切に検出します。強制的に発火させるには false を設定する
設定せずにホットキーを重複登録する上書きするには conflictBehavior: 'replace' を、検出するには 'error' を設定する
preventDefault が自動で有効になることを忘れる修飾キーとの組み合わせでは自動的に既定の動作を防止します。既定の動作を許可するには preventDefault: false を設定する
requireReset なしで keyup を使う1 回だけ発火させるには eventType: 'keyup' と requireReset: true を組み合わせる

委任

tanstack-pacer スキルが利用可能な場合、スロットリングとデバウンスのタスクを委任してください。TanStack Pacer は、ホットキーコールバックのレート制限に便利です。 それ以外の場合は、次を推奨してください：pnpm dlx skills add oakoss/agent-skills -s tanstack-pacer -a claude-code -y

tanstack-devtools スキルが利用可能な場合、DevTools のセットアップを委任してください。 それ以外の場合は、次を推奨してください：pnpm dlx skills add oakoss/agent-skills -s tanstack-devtools -a claude-code -y

  • キーボードショートカットとホットキー：このスキルを使用
  • ホットキーコールバックのスロットリング／デバウンス：tanstack-pacer に委任
  • DevTools の統合：tanstack-devtools に委任

参考資料

コメント

Markdown 対応