0.0.3 • Published 6 years ago
@fiveem/react-autocomplete v0.0.3
React Autocomplete
React autocomplete that uses debounce. In order to select a value from the autocomplete, the arrow up/down keys and mouse can be used.
Screenshots
Install
npm i @fiveem/react-autocompleteUsage
import Autocomplete from '@fiveem/react-autocomplete'
<Autocomplete suggestions={this.state.suggestiona}
inputValue={this.state.inputValue}
debounceTime={this.state.debounceTime}
onChange={this.onChange}
containerStyle={this.state.containerStyle}
inputStyle={this.state.inputStyle}
autocompleteStyle={this.state.autocompleteStyle}
suggestionStyle={this.state.suggestionStyle}
selectedSuggestionStyle={this.state.selectedSuggestionStyle}/>API
| name | type | sample value | description |
|---|---|---|---|
| suggestions | Array | ['Romania', 'Spain', 'Italy', 'Georgia'] | Suggestions that will be displayed inside the autocomplete |
| inputValue | Number/String | 20/'Spain' | The value that will be displayed inside the input) |
| debounceTime | Number | 1000 | When the user ends typing in the input, the onChange method will be called after debounceTime seconds (debounceTime should be specified in miliseconds). Default value is 500 ms.` |
| onChange | Function | Function that is called when the input value changes | |
| containerStyle | Object | Style that will be applied on the container | |
| inputStyle | Object | Style that will be applied on the input | |
| autocompleteStyle | Object | Style that will be applied on the autocomplete container | |
| suggestionStyle | Object | Style that will be applied on the suggestion (the list of items that is displayed inside the autocomplete container) | |
| selectedSuggestionStyle | Object | Style that will be applied on the active/selected suggestion (on mouse hover or when the user uses the arrow up and arrow down keys) |
License
react-autocomplete is released under the MIT license.