React Select の類似パッケージ

普段からちょくちょく使用している React Select ですが。

ちょっと融通が利かない部分があるのと、デバッグが難しく、もうちょっと他にないのかなーと探してみました。

React Select

スターは 20.7k と、今でもバリバリ使われているパッケージです。

カスタマイズ性はそこまで高くなく、シンプルで使いやすいパッケージです。

逆に動作周りやロジック周りでカスタマイズが必要なケースでは使いづらい印象があります。

React Autosuggest

スター数は 5.3k と、React Select よりは少ないです。

ただ、カスタマイズ性はこちらのほうが高く、デフォルトがシンプルに作られているのが良いですね。

スタイリング周りもカスタマイズ性が高く、CSS Modules との親和性も高いです。

型が一部対応しきれていなかったりしますが、意外と React Select より素直に実装できるのが好印象です。

React Autocomplete

スター数は 2.1k と決して少なくないですが、リポジトリがアーカイブされているのと、長い間開発が止まっています。

reactjs の公式パッケージのようなのですが、詳細は謎です。

無難に React Autosuggest を使うほうが良いのかなーと思います。

Autocomplete

Material-UI に入っているコンポーネントです。

Material-UI らしい見た目と、Material-UI らしくやたらカスタマイズの幅があります。

とても綺麗に作られているので、Material-UI を使用したプロジェクトであればこれを使えば問題ない印象です。

ということで、レシグルを React Select から React Autosuggest に移行してみましたが、ちょこちょこ詰まりつつも以前より綺麗に実装できました。

React Hook Form との相性は決して良いとは言えないのですが、React Hook Form がかなり自由度が高いおかげで、特に困ることもありませんでした。

React Select と React Autosuggest 両方使ってきた感想としては、今後も React Autosuggest を推していきたいなーと思った今日このごろです。