AWESOMESELECT

This is a select component, provide hot search, clean, show the number of items. It is simple to use. live demo

use

npm i --save react-awesome-select

And in you component

import { AwesomeSelect } from 'react-awesome-select';

class Select extends React.Component {
  contructor() {
    super();
    this.state = {
      data: [
        { name: `China`, value: 1, selected: true },
        { name: `Australia`, value: 2 },
        { name: `Austria`, value: 3 },
        { name: `Belgium`, value: 4 },
        { name: `Canada`, value: 5 },
        { name: `Denmark`, value: 6 },
        { name: `Ecuador`, value: 7 },
        { name: `Egypt`, value: 8 },
        { name: `Finland`, value: 9 },
        { name: `France`, value: 10 },
        { name: `Georgia`, value: 11 },
        { name: `Germany`, value: 12 },
        { name: `Greece`, value: 13 },
        { name: `Hungary`, value: 14 },
        { name: `Iceland`, value: 15 },
        { name: `India`, value: 16, selected: true },
        { name: `Iran`, value: 17, selected: true },
        { name: `Italy`, value: 18, selected: true }
      ]
    };
  }

  render() {
    return (
      <AwesomeSelect
        style={{ width: '400px' }}
        data={this.state.data}
        mult
        onChange={(value, name, allChoose) => console.log(`---`, value, name, allChoose)}
      />
    );
  }
}

Props

|props |type | |:------------------|--------------------:| |data |Array(isRequired) | |mult |Bool(default: false) | |style |object | |onChange |function(isRequired) | |onBlur |function |

data

const data = [{
  name: 'Stephen.Kingsley',
  value: 1,
  selected: true
}];

mult is MultiSelect,default is false

style is the select style

onChange(value, name, allChoose)

value is the item of value you click

name is the item of name you click

when mult = true. allChoose is what you selected

|params |type | |:------------ |--------:| |value |string | |name |string | |allChoose |object |

localhost demo

git clone https://github.com/stephenkingsley/react-select.git
cd react-select
npm install
npm start