【React】検索機能付きのSelect要素を実装できるライブラリ「React Select」

Select 要素の項目が多いと、スクロールしてお目当ての項目を探すのは大変だと思います。
現在開発中のプロジェクトでもまさにその状況になったので、解決のために「React Select」というライブラリを導入することにしました。
タイトルにもある通り、検索機能付きの Select 要素を実装できるライブラリです。

公式サイトはこちらから。

React-Select
https://react-select.com/home

GitHub のページはこちらです。

GitHub – JedWatson/react-select: The Select Component for React.js
https://github.com/jedwatson/react-select

さて、まずは下記のコマンドでライブラリをインストールします。

npm install react-select --save

が、こちらをインストールしたところ babel-preset-stage-2 というライブラリが足りないと怒られたので、下記のコマンドを実行しました。

npm install --save-dev babel-preset-stage-2

インストールが完了したら、あとはコードを実装するだけです。
サンプルコードは下記の通りです。

import React from 'react';
import Select from 'react-select';

const options = [
  { value: 'chocolate', label: 'Chocolate' },
  { value: 'strawberry', label: 'Strawberry' },
  { value: 'vanilla', label: 'Vanilla' },
];

class App extends React.Component {
  constructor(props) {
    super(props);
    this.handleChange = this.handleChange.bind(this);
  }
  handleChange() {
    // Select 要素変更時に実行したい処理を記述
  }
  render() {
    return (
      <Select
        value={options[0]}
        onChange={this.handleChange}
        options={options} />
    );
  }
}
module.exports = App;

options に、Select 要素で表示したい項目を指定します。
onChange は、Select 要素の値が変更した時に発火するので、その際に実行したい関数を指定します。
option 要素の設定方法が異なるだけで、あとは通常の Select 要素とほぼ一緒ですね。

あとは、こちらを実行すれば、検索機能付きの Select 要素が実装できるはずです。

以上、React で検索機能付きの Select 要素を実装するためのライブラリ「React Select」のご紹介でした。
ご参考になれば幸いです。