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-autocomplete

Usage

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.