# react-autosuggest-ui

> Autosuggest Component for React

Latest version **1.0.1** (published 2021-08-19) · ISC license · 0 weekly downloads

## Install

```sh
npm install react-autosuggest-ui
pnpm add react-autosuggest-ui
yarn add react-autosuggest-ui
bun add react-autosuggest-ui
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.1 |
| Published | 2021-08-19 |
| First published | 2021-08-19 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 11.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Maintainers | santhosh.korimi |
| Keywords | react, auto, autocomplete, autosuggest, auto-complete, auto-suggest, suggest, complete, autosuggestreact, autocompletereact, auto-suggestreact, auto-completereact, react-autocomplete, react-auto-suggest, react-auto-complete, react-component |

## Links

- npm: https://www.npmjs.com/package/react-autosuggest-ui
- Repository: https://github.com/Santhosh1392/react-autosuggest-ui
- Homepage: https://github.com/Santhosh1392/react-autosuggest-ui#readme
- Issues: https://github.com/Santhosh1392/react-autosuggest-ui/issues
- npm.io page: https://npm.io/package/react-autosuggest-ui

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 1.0.1 (latest) — 2021-08-19
- 1.0.0 — 2021-08-19

## README

# react-autosuggest-ui
Autosuggest Component for React

## How to Install

Make sure you have [Node.js](http://nodejs.org/) and NPM installed.

```sh
npm install react-autosuggest-ui
```

Or

```sh
yarn add react-autosuggest-ui
```

## How to Use

```sh
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](https://github.com/Santhosh1392/react-autosuggest-ui/blob/main/demo/demo.gif)

Check out [Online Demo](https://korimi.in/projects) 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             |

---
_Source: https://npm.io/package/react-autosuggest-ui · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._