# autocomplete-react-v2

> Customizable Autocomplete input component for react

Latest version **2.0.2** (published 2023-09-05) · ISC license · 0 weekly downloads

## Install

```sh
npm install autocomplete-react-v2
pnpm add autocomplete-react-v2
yarn add autocomplete-react-v2
bun add autocomplete-react-v2
```

## Health

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

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.0.2 |
| Published | 2023-09-05 |
| First published | 2023-09-04 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 72.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Nadav Avnon |
| Maintainers | zaguri8 |

## Links

- npm: https://www.npmjs.com/package/autocomplete-react-v2
- npm.io page: https://npm.io/package/autocomplete-react-v2

## Dependencies (1)

- [styled-components](https://npm.io/package/styled-components.md) ^6.0.7

## Recent versions

- 2.0.2 (latest) — 2023-09-05
- 2.0.1 — 2023-09-05
- 2.0.0 — 2023-09-05
- 1.1.6 — 2023-09-04
- 1.1.5 — 2023-09-04
- 1.1.3 — 2023-09-04
- 1.1.2 — 2023-09-04
- 1.1.1 — 2023-09-04
- 1.1.0 — 2023-09-04
- 1.0.8 — 2023-09-04
- 1.0.7 — 2023-09-04
- 1.0.6 — 2023-09-04
- 1.0.5 — 2023-09-04
- 1.0.4 — 2023-09-04
- 1.0.3 — 2023-09-04
- … 3 more at https://npm.io/package/autocomplete-react-v2/versions

## README

# How to use

## 1. Install

```bash
$ npm install autocomplete-react-v2
```

## 2. Import

```import { Autocomplete } from 'autocomplete-react-v2'```


## 4. Example

```jsx
import React, { Component } from 'react';
import { Autocomplete } from 'autocomplete-react-v2';

const COUNTRIES = [
  'Afghanistan',
  'Aland Islands',
  'Albania',
  'Algeria',
  'American Samoa',
  'Andorra',
  'Angola',
  'Anguilla',
];


export default function Example() {

const onOptionSelected = (value) => {
  console.log(value);
};
return (
  <Autocomplete
    words={COUNTRIES}
    placeholder="Type something..."
    onOptionSelected={onOptionSelected}
    showOnFocus={true}
    hideOnBlur={true}
  />
);
}
``` 
![Alt text](https://i.ibb.co/QF6PTsV/Screenshot-2023-09-05-at-22-04-45.png)

## 5. Properties
| Property | Type | Default | Description |
| --- | --- | --- | --- |
| words | array | [] | Array of words to be used for autocomplete |
| placeholder | string | "" | Placeholder text for input |
| onOptionSelected | function | () => {} | Callback function when option is selected |
| containerStyle | object | {} | Style object for container |
| inputStyle | object | {} | Style object for input |
| completionTextStyle | object | {} | Style object for completion text |
| completionListStyle | object | {} | Style object for completion list |
| showOnFocus | boolean | false | Show completion list on input focus |
| hideOnBlur | boolean | false | Hide completion list on input blur |

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