React-selectで複数選択や、選択値にアイコンを指定する

#React

#初心者向け

北川慶太

2022.12.21

この記事は公開されてから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>
  );
};