この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。
こんにちは。データアナリティクス事業本部 サービスソリューション部の北川です。
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の便利な機能を試してみました。複数選択など、通常のセレクトボックスで実装するのは難しいので、非常に便利なライブラリだなと思います。他にも便利なオプションがありますので、利用してみてください。
ではまた。