!react search box

!npm bundle size !NPM !npm !npm !Edit on Codesandbox

$3

``sh


npm

npm i react-search-box --save

yarn

yarn add react-search-box
`

$3

`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 (
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 - A JavaScript library for building user interfaces
- Fuse - Lightweight fuzzy-search library. Zero dependencies.
- Styled components - Visual primitives for the component age.

License

MIT Licensed. Copyright (c) Nirmalya Ghosh 2021.