こんにちわ。nap5です。

useSearchBarというカスタムフックを作って上下矢印キー操作からアイテムを操作してみたので紹介したいと思います。

デモサイトです。上下矢印キーでアイテム選択後、選択した状態でEnterキーを押下すると、今回のデモだと別ページへ遷移します。

https://react-interactive-keyboard-search-bar-typescript-nextjs-app.vercel.app/films

以下はコードの抜粋になります。まずはストア側の定義なります。

アイテムのアクティブインデックスが保持できればOKです。

次にフック側です。react-useライブラリのuseKeyPressからポートしてキーダウンとアップ、そしてEnterキーに対してアクションを定義しています。

アイテム選択時にEnterキーを押下すると、今回のデモだと別ページへ遷移します。

最後にコンポーネント側でアクションインデックスを参照しておしまいです。

いろいろ応用してみると使いどころがあると思います。

簡単ですが、以上です。