こんにちは、AIQ株式会社のフロントエンドエンジニアのまさぴょんです！
今回は、Reactで検索機能(Auto Complete)付きのSelectBoxを実装するならreact-selectが簡単に実装できて、おすすめなのでご紹介していきます。
react-selectとは？
react-selectとは、検索機能(Auto Complete)や複数選択が可能などのSelctBoxを簡単に実装することができるReactのライブラリです。
次のようなユースケースで、利用を検討するといいかもしれません。
react-selectのインストール
次のコマンドで、react-selectをインストールできます。
yarn add react-select
//または
npm install react-select
検索機能(Auto Complete)付きのSelectBoxを実装する
検索機能(Auto Complete)付きのSelectBoxを実装するSampleCodeは、次のとおりです。
これだけで、検索機能(Auto Complete)付きのSelectBoxを実装するので、楽ちんです。
import Select from "react-select";
import { useState } from "react";
export interface OptionType {
id: number;
value: string;
label: string;
isCat: boolean;
}
const SearchSelectBox = () => {
/**
* 選択肢のリスト
*「key: value」は、自由に追加が可能なので、使い勝手がいい。
*/
const options = [
{ id: 1, value: "robotama", label: "ロボ玉", isCat: false },
{ id: 2, value: "maritama", label: "まり玉", isCat: false },
{ id: 3, value: "hakutou", label: "白桃さん", isCat: true },
{ id: 4, value: "momo", label: "ももちゃん", isCat: true },
{ id: 5, value: "pyupyumaru", label: "ぴゅぴゅ丸", isCat: true },
];
const [selectedValue, setSelectedValue] = useState<OptionType>(options[0]);
const handleChange = (option: OptionType | null) => {
console.log("Select変更");
console.log("option", option);
if (option) {
setSelectedValue(option);
}
};
return (
<div style={{ width: "500px", margin: "20px" }}>
<Select
/** SelectBox の id */
instanceId="search-select-box"
defaultValue={selectedValue}
options={options}
onChange={(option) => handleChange(option)}
/** 検索で、該当なしの場合のメッセージ */
noOptionsMessage={() => "ペットが見つかりません"}
placeholder="ペットを選んでください"
/** 検索可能・オプション */
isSearchable={true}
components={{
/** Defaultで表示されているセパレーターを消す */
IndicatorSeparator: () => null,
}}
/>
</div>
);
};
export default SearchSelectBox;
複数選択が可能なSelectBoxを実装する
複数選択が可能なSelectBoxを実装するSampleCodeは、次のとおりです。
isMultiのフラグと、optionを複数受け取れるようにするだけで、すぐに実装できます。
import { useState } from "react";
import Select from "react-select";
export interface OptionType {
id: number;
value: string;
label: string;
isCat: boolean;
}
const SearchMultiSelectBox = () => {
/**
* 選択肢のリスト
*「key: value」は、自由に追加が可能なので、使い勝手がいい。
*/
const options = [
{ id: 1, value: "robotama", label: "ロボ玉", isCat: false },
{ id: 2, value: "maritama", label: "まり玉", isCat: false },
{ id: 3, value: "hakutou", label: "白桃さん", isCat: true },
{ id: 4, value: "momo", label: "ももちゃん", isCat: true },
{ id: 5, value: "pyupyumaru", label: "ぴゅぴゅ丸", isCat: true },
];
const [selectedValue, setSelectedValue] = useState([options[0]]);
const handleChange = (options: OptionType[] | null) => {
console.log("Select変更");
console.log("option", options);
if (options) {
setSelectedValue([...options]);
}
};
return (
<div style={{ width: "500px", margin: "20px" }}>
<Select
/** SelectBox の id */
instanceId="search-select-box"
defaultValue={selectedValue}
options={options}
onChange={(options) => (options ? handleChange([...options]) : null)}
/** 検索で、該当なしの場合のメッセージ */
noOptionsMessage={() => "ペットが見つかりません"}
placeholder="ペットを選んでください"
/** 検索可能・オプション */
isSearchable={true}
components={{
/** Defaultで表示されているセパレーターを消す */
IndicatorSeparator: () => null,
}}
/** 複数選択・可能 */
isMulti
/>
</div>
);
};
export default SearchMultiSelectBox;
まとめ
react-selectは、検索機能(Auto Complete)や複数選択が可能などの複雑なSelectBox機能を簡単に実装できるので、おすすめです。
その昔、JavaScriptだけで、複数選択と検索が可能なSelectboxを作成したことがありますが、こういうライブラリを使ったほうが楽だし、余計な工数がかからなくていいですね。
(そのプロジェクトでは、React使ってなかったので、仕方ないのですが。。。)
注意事項
この記事は、AIQ 株式会社の社員による個人の見解であり、所属する組織の公式見解ではありません。
求む、冒険者！
AIQ株式会社では、一緒に働いてくれるエンジニアを絶賛、募集しております🐱🐹✨
詳しくは、Wantedly (https://www.wantedly.com/companies/aiqlab)を見てみてください。
参考・引用
AIQ 株式会社 に所属するエンジニアが技術情報をお届けします。 ※ AIQ 株式会社 社員による個人の見解であり、所属する組織の公式見解ではありません。 Wantedly: wantedly.com/companies/aiqlab
Discussion