react-autocomplete-widget
Version:
A lightweight autocomplete widget with an option of showing results in a handy ListView. Uses no extra stylesheets or dependencies!
66 lines (55 loc) • 2.97 kB
Markdown
React-Autocomplete-Widget
=========================
A lightweight react autocomplete widget with an option of showing results in a handy ListView. Uses no extra stylesheets or dependencies.
## Demo
You can see a live demo [here.](https://beslisbeth.github.io/react-autocomplete-widget/docs/)
Results of selecting or deleting an option will be shown in browser's console.
## Install
````
npm install react-autocomplete-widget
````
## Getting started
First, include autocomplete styles in your project:
````
node_modules/react-autocomplete-widget/dist/autocomplete.css
````
and autocomplete widget itself:
````
import Autocomplete from 'react-autocomplete-widget';
````
## Usage example
An example of autocomplete usage if there is a needed of searching for different types of coffee.
````
<Autocomplete
defaultResults={['Americano', 'Caffé Latte', 'Cappuccino', 'Espresso']}
id='coffee'
maxCount={5}
onDelete={deleted => console.log('Deleted: ' + deleted)}
onInput={typedCoffee => getTypesOfCoffee(typedCoffee)}
onSelect={selected => console.log('Selected: ' + selected)}
placeholder='Type any type of coffee'
repeatOptions={false}
showResultsList
/>
````
*For more examples and usage, please refer to the folder "docs"*
## Props
| Prop | Type | Required | Description |
| :-------------: | :-------: | :------: | ----------------------------------------- |
| defaultResults | Array | - | The results which will be shown when prop showResultsList={true}. |
| id | Any | ✓ | Very important when a couple of autocomplete widgets are on the same page. |
| maxCount | Number | - | An amount of options in the list of suggestions. |
| onDelete | Function | - | Will be called every time result is deleted via the "x" button (if results are shown. Returns deleted option. |
| onInput | Function | - | Takes a promise with an array of suggestions. |
| onSelect | Function | - | Will be called every time option is selected or typed in autocomplete. Returns selected option. |
| placeholder | String | - | Placeholder for displaying in input An options which are shown in the resultsListView can be not repeated in the suggestions.|
| showResultsList | Bool | - | ListView of results can be hided. |
## Testing
*Will be added soon.*
## Built with
Project has such peer dependencies:
* [react@15.1.0](https://github.com/facebook/react/)
* [react-dom@15.1.0](https://www.npmjs.com/package/react-dom)
* [prop-types@15.5.10](https://www.npmjs.com/package/prop-types)
## License
This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details