react select component
npm install simple-react-select



``$xslt
$ yarn add simple-react-select
// or
$ npm install simple-react-select --save
`
Then you need to import its component and css:
`$xslt`
import Select from 'simple-react-select'
import 'simple-react-select/lib/simple-react-select.css'
#### Make sure you have react@16.8.6 installed.
`$xslt`
"peerDependencies": {
"react": "^16.8.6",
"react-dom": "^16.8.6"
}
Now, let's place component in your Web APP!
`$js
import React, {memo, useState} from 'react';
import Select from 'simple-react-select';
import 'simple-react-select/lib/simple-react-select.css'
const App = memo(() => {
const optionList = [
{ value: 'Ocean', color: '#00B8D9' },
{ value: 'Blue', color: '#0052CC', isDisabled: true },
{ value: 'Purple', color: '#5243AA' },
{ value: 'Red', color: '#FF5630' },
{ value: 'Orange', color: '#FF8B00' },
{ value: 'Yellow', color: '#FFC400' },
{ value: 'Green', color: '#36B37E' },
{ value: 'Forest', color: '#00875A' },
{ value: 'Slate', color: '#253858' },
{ value: 'Silver', color: '#666666' },
];
const stateSelect = useState('');
const attribute = {
select: stateSelect[0],
onSelectChange: val => stateSelect1,
};
return (
If you wanna explore more usages, here's a playground on CodeSandBox.io.
| Props | Description | Type | Opt | Default |
| ---- |:----:|:----:|:----:|:----:|
| placeholder | change the text displayed when no option is selected | string | — | — |
| select | control the current value | string | — | — |
| noOptionsText | Text to display when there are no options | string | — | — |
| loadingText | Text to display when loading | string | — |—|
| isLoadingIcon | need loading icon or not when loading | boolean | — |true|
| selectCustomStyle | select custom style | object | { width: '300px', selectColor: stateBgColor[0], selectBorderRadius: '0', selectBorderColor: 'black', activeBorderColor: 'red' } | {} |
| optionsCustomStyle | options custom style | object | { maxHeight: '200px', optionsBorderColor: 'black', optionsBorderRadius: '0', optionHoverBgColor: '#eee', optionActiveBgColor: 'pink', optionActiveColor: 'blue'} | {} |
| optionsIsLoading | loading control | boolean | — | false |
| onSelectChange | subscribe to change events | function | — | (res) => {} |
| isSearchable | allow the user to search for matching options | boolean | — | false |
| isClearable | clear select or input value | boolean | — | false |