npm package: @nurhanna/react-search-box
Description: An autocomplete search box for ReactJS
Author: ghoshnirmalya
Latest version: 3.0.1

<span align="center">

![react search box](https://user-images.githubusercontent.com/6391763/50571850-21a4f080-0dda-11e9-9370-ac16c4e93746.png)

![npm bundle size](https://img.shields.io/bundlephobia/minzip/react-search-box?style=for-the-badge) ![NPM](https://img.shields.io/npm/l/react-search-box?style=for-the-badge) ![npm](https://img.shields.io/npm/v/react-search-box?style=for-the-badge) ![npm](https://img.shields.io/npm/dw/react-search-box?style=for-the-badge) <a href="https://codesandbox.io/s/react-search-box-example-cra-17ml6?fontsize=14&hidenavigation=1&theme=dark" target="_blank">![Edit on Codesandbox](https://img.shields.io/badge/demo-Edit%20on%20Codesandbox-2385f7?style=for-the-badge&logo=codesandbox)</a>

</span>

### Installation

```sh
# npm
npm i react-search-box --save

# yarn
yarn add react-search-box
```

### Usage

```js
import React, { Component } from "react";
import ReactSearchBox from "react-search-box";

export default class App extends Component {
  data = [
    {
      key: "john",
      value: "John Doe",
    },
    {
      key: "jane",
      value: "Jane Doe",
    },
    {
      key: "mary",
      value: "Mary Phillips",
    },
    {
      key: "robert",
      value: "Robert",
    },
    {
      key: "karius",
      value: "Karius",
    },
  ];

  render() {
    return (
      <ReactSearchBox
        placeholder="Placeholder"
        value="Doe"
        data={this.data}
        callback={(record) => console.log(record)}
      />
    );
  }
}
```

## Props

| Prop                 | Description                                                                                                      |
| -------------------- | ---------------------------------------------------------------------------------------------------------------- |
| placeholder          | The placeholder text for the input box                                                                           |
| data                 | An array of objects which acts as the source of data for the dropdown. This prop is required                     |
| fuseConfigs          | Configs to override default Fuse configs                                                                         |
| autoFocus            | Focus on the input box once the component is mounted                                                             |
| clearOnSelect        | Clear the input value when any record is selected                                                                |
| onSelect             | A function which acts as a callback when any record is selected. It is triggered once a dropdown item is clicked |
| onFocus              | A function which acts as a callback when the input is focussed                                                   |
| onChange             | A function which acts as a callback when the input value is changed                                              |
| inputFontColor       | Color of the text in the input box                                                                               |
| inputBorderColor     | Color of the border of the input box                                                                             |
| inputFontSize        | Size of the font of the input box                                                                                |
| inputHeight          | Height of the input box                                                                                          |
| inputBackgroundColor | Background color of the input box                                                                                |
| dropDownHoverColor   | Background color on hover of the dropdown list items                                                             |
| dropDownBorderColor  | Border color of the dropdown                                                                                     |
| leftIcon             | Icon to be rendered on the left of the input box                                                                 |
| iconBoxSize          | The size of the icon (based on the leftIcon prop)                                                                |
| type                 | The type of the input                                                                                            |

## Built With

- [React](https://reactjs.org/) - A JavaScript library for building user interfaces
- [Fuse](http://fusejs.io/) - Lightweight fuzzy-search library. Zero dependencies.
- [Styled components](https://www.styled-components.com/) - Visual primitives for the component age.

## License

MIT Licensed. Copyright (c) Nirmalya Ghosh 2021.