react-multiple-selector
This package built on react-select
to select cities, countries, regions, ..etc.
Installation and usage
You can install it using npm
npm install react-multiple-selector
then use it in your app like this:
;; { const inputValue setValue = ; { if!value return ; return { const url = `https://api.test.com`; return } } return <div className="App"> <ReactSelect maxSelectedItems=5 onInputChange= { ; return e; } debounceTime=2000 loadOptions=onChange inputValue=inputValue onChange= { console; } customType="Country" /> </div> ;} ;
Props
Prop | Type | Usage | Note |
---|---|---|---|
maxSelectedItems |
Number | The maximum number of countries you can select. | you can select any number of cities/regions/zipcode under those countries, but you can't add another country. |
onInputChange |
Function | fires when you change the input value. | (inputValue) => { return inputValue;} |
inputValue |
String | The input value you entered | you can manage it using state |
onChange |
Function | Fires when the value of cities changed | (currentSelectedCities, lastAction) => {} |
loadOptions |
Function | Fires to load options to select | (value, callback) => ... |
labelOption |
String | Label Option to show in options list or when selected | default = 'name' |
valueOption |
String | Unique value option to select | default = '_id' |
typeOption |
String | Property to set maximum selected items on it | default = 'type' |
customType |
String | Previous Property value to apply the maximum on it | default = 'country' |
debounceTime |
Number | Debounce time applied to onChange function so the function doesn't fire before your last keyboard click and this time |
default = 300 |
value |
Array | List of default values | [{}, {}, ...] |
placeholder |
String | Placeholder for searching | default = 'Search...' |