react-selectが便利だった件

react勉強中。勉強も兼ねてタスク管理アプリをreactで作成することに。

その中でセレクトボックスを作成したのですが、react-selectでサクッと実装出来ました。

使い方
まとめ
参考

使い方

1. インストール

npm i --save react-select

2. 使用するコンポーネント箇所でimport

import React from 'react'

import Select from 'react-select'

3. セレクトで表示させる選択肢を用意し、Selectコンポーネントのoptionsに渡す。

const options = [

{ value: 'chocolate', label: 'Chocolate' },

{ value: 'strawberry', label: 'Strawberry' },

{ value: 'vanilla', label: 'Vanilla' }

]

const MyComponent = () => (

<Select options={options} />

)

4. 以上。

めちゃ簡単でした。セレクトする際のアニメーションをつけられたり、選択肢のラベルごとに色をつけられたり、カスタマイズも可能です。

私は複数選択可能にするmultiを使いました。

import React from 'react';

import Select from 'react-select';

import { colourOptions } from '../data';

export default () => (

<Select

defaultValue={[colourOptions[2], colourOptions[3]]}　// 初期選択の設定

isMulti　// 複数選択可能にする

name="colors"

options={colourOptions}　// 選択肢colourOptionsを渡す

/>

);