React.js react-selectの導入と使い方

作成日 2020.02.03
更新日 2020.07.21
React
React.js

reactのライブラリであるreact-selectがサジェスト機能もあり、使いやすかったので、サンプルコードを記載。

1. 環境
2. react-selectインストール
3. react-selectを利用

環境

OS CentOS Linux release 8.0.1905 (Core)
node V10.16.3
npm 6.9.0
React 16.12.0

react-selectインストール

下記のコマンドでインストールします

npm i -S react-select

## cssもインストールします
npm i -S react-select-css

react-selectを利用

selectboxを表示してみます。

src配下のApp.jsに下記のコードに編集します。

import React, { Component } from 'react';
import Select from 'react-select';
import 'react-select-css/dist/react-select-css.min.css';
import './App.css';

const options = [
  { value: 'america', label: 'america' },
  { value: 'canada', label: 'canada' },
  { value: 'china', label: 'china' },
  { value: 'japan', label: 'japan' },
  { value: 'korea', label: 'korea' },
  { value: 'france', label: 'france' },
  { value: 'spain', label: 'spain' },
]

class App extends Component{
  render() {
    return (          
      <div className="App">
        <header className="App-header">
          <div className="App-content">                   
            <Select options={options} />
           </div>
        </header>
      </div>          
    )
  }
}

export default App;

ブラウザから http://プライベートIP:3000 にアクセスすると、selectboxが表示されます。

multiselectも可能です。

src配下のApp.jsを下記のコードに編集しなおします。

import React, { Component } from 'react';
import Select from 'react-select';
import 'react-select-css/dist/react-select-css.min.css';
import './App.css';
import makeAnimated from 'react-select/animated';

const animatedComponents = makeAnimated();

const options = [
  { value: 'america', label: 'america' },
  { value: 'canada', label: 'canada' },
  { value: 'china', label: 'china' },
  { value: 'japan', label: 'japan' },
  { value: 'korea', label: 'korea' },
  { value: 'france', label: 'france' },
  { value: 'spain', label: 'spain' },
]

class App extends Component{
  render() {
    return (
      <div className="App">
        <header className="App-header">   
          <div className="App-content">
            <Select
            closeMenuOnSelect={false}
            components={animatedComponents}      
            isMulti
            options={options}
            />
          </div>
        </header>
      </div>
    )
  }
}

export default App;

multiselectが可能になっております。