README
react-autosuggest-ui
Autosuggest Component for React
How to Install
Make sure you have Node.js and NPM installed.
npm install react-autosuggest-ui
Or
yarn add react-autosuggest-ui
How to Use
import React from 'react'
import AutoSuggest from 'react-autosuggest-ui'
const data = [
{
name: 'React.JS',
value: 'React.JS'
},{
name: 'Vue.JS',
value: 'Vue.JS'
},
{
name: 'Angular.JS',
value: 'Angular.JS'
},{
name: 'JavaScript',
value: 'JavaScript'
}
]
const AutoSuggestDemo = () => {
const handleOnChange = (selected) => {
console.log('selected', selected)
}
return (
<AutoSuggest
data={data}
onChange={handleOnChange}
placeholder="Search"
/>
)
}
Demo
Check out Online Demo here.
Available PropTypes
Prop Name | Type | Default Value | Description |
---|---|---|---|
activeItemBackground | String | '#ddd' | Background color for selcted item |
data | Array | [] | Data from where suggestions will show |
enableArrowNavigation | Boolean | true | Ability to select suggestions using arrows |
inactiveItemBackground | String | '#fff' | Background color for inactive item |
onChange | Function | null | Callback function to get the selected value |
placeholder | String | 'Search' | Placeholder to display on input |
inputClassName | String | '' | Classname to input for custom styling |
noMatchText | String | 'No match found! | Text to display on empty suggestions |