1.0.1 • Published 3 years ago

react-autosuggest-ui v1.0.1

Weekly downloads
-
License
ISC
Repository
github
Last release
3 years ago

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

Autosuggest Demo

Check out Online Demo here.

Available PropTypes

Prop NameTypeDefault ValueDescription
activeItemBackgroundString'#ddd'Background color for selcted item
dataArray[]Data from where suggestions will show
enableArrowNavigationBooleantrueAbility to select suggestions using arrows
inactiveItemBackgroundString'#fff'Background color for inactive item
onChangeFunctionnullCallback function to get the selected value
placeholderString'Search'Placeholder to display on input
inputClassNameString''Classname to input for custom styling
noMatchTextString'No match found!Text to display on empty suggestions