Repolode
timc1

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. 1

    npmからkbarをインストールします

    npm install kbar
  2. 2

    アプリをKBarProviderでラップし、UIコンポーネントを追加します

  3. 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 の数値は毎日更新されます。

関連プロジェクト