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