# npm
npm i react-search-box --save
# yarn
yarn add react-search-boximport 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)}
/>
);
}
}| 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 |
- React - A JavaScript library for building user interfaces
- Fuse - Lightweight fuzzy-search library. Zero dependencies.
- Styled components - Visual primitives for the component age.
MIT Licensed. Copyright (c) Nirmalya Ghosh 2021.