ウィンドウ配置からキーの再割り当てまで、デスクトップをカスタマイズし日々の作業を効率化する30種類以上のWindowsユーティリティ集です。
timc1/kbar
Webサイトに検索可能なアクションメニューとキーボードショートカットを追加できる、React製のコマンドパレット(Cmd+K)コンポーネント。
- スター
- 5,261
- フォーク
- 204
- 未解決の Issue
- 0
- 最終コミット
- 3 か月前
これは何?
kbarは、WebサイトやWebアプリにCmd+K形式のコマンドパレットを追加するためのReactコンポーネントライブラリです。ユーザーはショートカットキーで検索ボックスを開き、通常なら画面をクリックして操作する必要があるアクションを実行できます。
アクションは、id、name、keywords、任意のキーボードショートカット、perform関数を持つプレーンなオブジェクトとして定義します。アプリ全体を単一のKBarProviderでラップして使います。ライブラリには、デフォルトでスタイルが設定されていないportal、positioner、animator、検索入力欄、結果リストなどのUIパーツが用意されています。useMatchesなどのフックは現在のクエリに応じて結果を絞り込み、大量のアクションを扱う場合は結果リストを仮想化します。
複数段階のナビゲーションに対応するネストしたアクション、アクション履歴を使ったUndo・Redo、スクリーンリーダーへの対応も備えています。基盤となるデータ構造を利用して、コンポーネントをカスタマイズしたり、完全に置き換えたりすることもできます。
主な機能
- 01個々のアクションにキーボードショートカットを登録できます。
- 02ネストしたアクションで複数段階のナビゲーションを実現できます。
- 03アクション数が多い場合に対応する、仮想化された結果リスト。
- 04アクション履歴を使ったUndo・Redo。
- 05アニメーションを標準搭載し、コンポーネントをカスタマイズできます。
- 06スクリーンリーダーに標準対応しています。
ユースケース
- React製のドキュメントサイトやコンテンツサイトに、Cmd+Kで使える検索・ナビゲーションメニューを追加する。
- SaaSダッシュボードで、ユーザーがキーボードからアプリのアクションを実行できるようにする。
- Webアプリのページや設定にすばやく移動できるメニューを構築する。
クイックスタート
- 1
npmからkbarをインストールします
npm install kbar - 2
アプリをKBarProviderでラップし、UIコンポーネントを追加します
- 3
cmd+k(macOS)またはctrl+k(Linux/Windows)を押してコマンドメニューを開きます
トピック
よくある質問
- kbar とは?
- Webサイトに検索可能なアクションメニューとキーボードショートカットを追加できる、React製のコマンドパレット(Cmd+K)コンポーネント。 kbarは、WebサイトやWebアプリにCmd+K形式のコマンドパレットを追加するためのReactコンポーネントライブラリです。ユーザーはショートカットキーで検索ボックスを開き、通常なら画面をクリックして操作する必要があるアクションを実行できます。
- kbar は無料で使えますか?ライセンスは?
- kbar は MIT ライセンスのオープンソースです。商用製品で使う前にライセンス条件を確認してください。
- kbar は今もメンテナンスされていますか?
- 半年以内に更新あり。kbar の最終コミットは 2026年8月10日 です。
- kbar は何に使えますか?
- React製のドキュメントサイトやコンテンツサイトに、Cmd+Kで使える検索・ナビゲーションメニューを追加する。 SaaSダッシュボードで、ユーザーがキーボードからアプリのアクションを実行できるようにする。 Webアプリのページや設定にすばやく移動できるメニューを構築する。
- kbar のインストール方法は?
- npmからkbarをインストールします: npm install kbar アプリをKBarProviderでラップし、UIコンポーネントを追加します cmd+k(macOS)またはctrl+k(Linux/Windows)を押してコマンドメニューを開きます
- kbar はどこで入手できますか?
- ソースコードとインストール手順は GitHub にあります:https://github.com/timc1/kbar
概要はプロジェクトの README をもとに AI が生成しています。GitHub の数値は毎日更新されます。
関連プロジェクト
独自のデータソースとDOM描画でオートコンプリートやタイプアヘッド検索ボックスを構築できるJavaScriptライブラリ。
Niriに着想を得たmacOS向けのスクロール型タイルウィンドウマネージャー。ウィンドウを横長の帯に列状に配置します。
Provider不要の、React向け小型フックベースの状態管理ライブラリ。
WebやReact Native向けに、状態管理とバリデーションを備えた高パフォーマンスなフォームを構築するReact Hooksライブラリ。
キャッシュデータを先に返し、バックグラウンドで再検証するデータ取得用React Hooksライブラリ。