【React】react-selectでカスタムフィルターを設定する

概要

Reactでフィルター機能付きのプルダウンを実装する際に、代表的なライブラリがreact-selectです。ざっくりとした機能はreact-selectザックリ紹介で紹介されています。
react-selectですがデフォルトのフィルターだと、おそらくlabelとvalueに対して部分位置の条件で絞り込みがされていると想定されます（少し動作確認してみた感触では）。このフィルターのロジックを、カスタムで設定したい場合どうするかというのをメモ書きします。

対応

こちらのドキュメントにある通り、フィルターの関数を作成し、それをfilterOptionに設定してあげれば良さそうです。もう少し詳細な実装はReact-Select with custom label and custom searchにて紹介されています。

実装サンプル

labelを対象に、前方一致でフィルターする実装サンプルは以下の通りです。

export default function SampleSelectComponent() {
  const options = [
    { value: "1_value", label: "1_label" },
    { value: "2_value", label: "2_label" },  
    { value: "3_value", label: "3_label" }   
  ];
  const customFilter = (option, searchText) => {
    return option.label.startsWith(searchText);
  };
  return (
    <Select
      options={options}
      filterOption={customFilter}
    />
  );
}