# react-autosearchbar

> Customizable searchbar for React that supports from-middle-of-word searches and provides autocomplete options with matching characters in bold text.

Latest version **1.1.2** (published 2019-07-10) · ISC license · 0 weekly downloads

## Install

```sh
npm install react-autosearchbar
pnpm add react-autosearchbar
yarn add react-autosearchbar
bun add react-autosearchbar
```

## 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.1.2 |
| Published | 2019-07-10 |
| First published | 2019-07-08 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 53.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | George Geeslin |
| Maintainers | ggeeslin |
| Keywords | ReactJs, autocomplete, auto-complete, autosuggest, auto-suggest, searchbar |

## Links

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

## Alternatives

- [jsforce](https://npm.io/package/jsforce.md) — 851.2K weekly downloads
- [react-native-qrcode-svg](https://npm.io/package/react-native-qrcode-svg.md) — 693.5K weekly downloads
- [@salesforce/plugin-data](https://npm.io/package/@salesforce/plugin-data.md) — 394.9K weekly downloads
- [@backstage/plugin-search-common](https://npm.io/package/@backstage/plugin-search-common.md) — 308.5K weekly downloads
- [@chain-registry/types](https://npm.io/package/@chain-registry/types.md) — 38.4K weekly downloads

## Recent versions

- 1.1.2 (latest) — 2019-07-10
- 1.1.1 — 2019-07-09
- 1.1.0 — 2019-07-09
- 1.0.0 — 2019-07-08

## README

# React Autosearchbar

Customizable searchbar for React. Supports from-middle-of-word searches and provides autocomplete options with matching characters in bold text.

When only one character is entered only items beginning with that character are returned. When multiple character are entered then all results containing that character combination are returned.

```jsx
import { Searchbar } from "react-autosearchbar";

<Searchbar data={data} returnSuggestions={returnSuggestions} />;
```

Checkout out this [example](https://codesandbox.io/embed/react-autosearchbar-46z17) to see how to use the component.

## Install

### npm

`npm install --save react-autosearchbar`

## Prerequisites

[styled components](https://www.styled-components.com/)

`npm install --save styled-components`

## Usage

Add the Searchbar component where ever you would like it to appear. Autocomplete options will populate directly underneath it as the user types.

## Props

### Required

#### `data: Array`

An array of the items you wish to search through. React Autosearchbar does not sort this array so you may need to sort your data first if you want autocomplete suggestions to appear in alphabetical order.

#### `returnSuggestions: Function(array)`

Function that is called when the user presses Enter or clicks on an autocomplete item. Takes an array of the currently displayed autocomplete suggestions as an argument. Write this function to suit your needs.

##### Example

```javascript
const returnSuggestions = suggestions => {
  this.setState({ searchResults: suggestions });
};
```

### Optional

The following Props are optional and are primarily used to style the Searchbar and AutoComplete components via styled-components.

#### `autoCompBackgroundColor: String [default: white]`

Set background-color of autocomplete items.

#### `autoCompColor: String [default: black]`

Set font color of autocomplete items.

#### `backgroundHover: String [default: #e9e9e9]`

Set background-color of autocomplete items during hover.

#### `borderColor: String [default: #d4d4d4]`

Set border-color of autocomplete items.

#### `borderRadius: String [default: 4px]`

Set border-radius of input field and autocomplete items.

#### `borderStyle: String [default: solid]`

Set border-style of autocomplete items.

#### `fontFamily: String [default: Roboto, sans-serif]`

Set font-family of input field and autocomplete items.

#### `fontSize: String [default: 1em]`

Set font-size of input field and autocomplete items.

#### `highlightBackground: String [default: DodgerBlue]`

Set background-color of autocomplete item when it is highlighted via the arrow keys.

#### `inputBackgroundColor: String [default: white]`

Set background-color of input field.

#### `inputColor: String [default: black]`

Set font color of input field.

#### `inputHeight: String [default: 35px]`

Set height and line-height properties of input field and autocomplete items. Can be any valid css height value.

#### `placeholder: String [default: Search]`

Placeholder value for input field.

#### `paddingLeft: String [default: .5em]`

Set left-padding of input field and autocomplete items.

#### `resultLimit: Number [default: null]`

Set a limit to the number of autocomplete items that are displayed at a time. By default all results will be shown.

#### `width: String [default: 100%]`

Set width of Searchbar component.

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