react-autosuggest-ui

Autosuggest Component for React

Usage no npm install needed!

<script type="module">
  import reactAutosuggestUi from 'https://cdn.skypack.dev/react-autosuggest-ui';
</script>

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

Autosuggest 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