React-selectで複数選択や、選択値にアイコンを指定する
こんにちは。データアナリティクス事業本部 サービスソリューション部の北川です。
react-selectは、多機能のセレクトボックスを実装することができるReactのライブラリです。
複数選択可能のセレクトボックスの実装や、選択する値にアイコンを渡したりといったことが、簡単に行えます。
試してみた
react-selectを使用したいプロジェクトでインストールします。
yarn add react-select //または npm install react-select
options
に、セレクト値を配列の形で指定します。optionsのvalueとlabelにはそれぞれ受け取る値と表示するラベルを指定します。
import { useState } from "react"; import Select from "react-select"; const options = [ { value: "line", label: "折れ線グラフ" }, { value: "bar", label: "棒グラフ" }, { value: "pie", label: "円グラフ" }, ]; const Home = () => { const [selectedValue, setSelectedValue] = useState(options[0]); console.log(selectedValue); return ( <div style={{ width: "600px", margin: "50px" }}> <Select options={options} defaultValue={selectedValue} onChange={(value) => { value ? setSelectedValue(value) : null; }} /> </div> ); }; export default Home;
これだけで、セレクトボックスを実装することができます。
選択値にアイコンを指定する
通常のセレクトボックスと違って、optionsのlabelの型には、string、numberだけでなくJSX.Elementを渡すことができます。
試しにreact-iconsを使用して、アイコンを渡します。
yarn add react-icons --save
labelを変更します。
import { FaChartBar, FaChartLine, FaChartPie } from "react-icons/fa"; const options = [ { value: "line", label: <FaChartLine />, }, { value: "bar", label: <FaChartBar />, }, { value: "pie", label: <FaChartPie />, }, ];
複数選択を可能にする
また、オプションのisMulti
をtrueにするだけで、セレクト値を複数選択可能にします。
const Home = () => { const [selectedValue, setSelectedValue] = useState([options[0]]); console.log("selectedValue", selectedValue); return ( <div style={{ width: "500px", margin: "50px" }}> <Select options={options} defaultValue={selectedValue} onChange={(value) => { value ? setSelectedValue([...value]) : null; }} isMulti // trueに /> </div> ); };
まとめ
簡単にですが、react-selectの便利な機能を試してみました。複数選択など、通常のセレクトボックスで実装するのは難しいので、非常に便利なライブラリだなと思います。他にも便利なオプションがありますので、利用してみてください。
ではまた。