3.0.0 • Published 1 year ago
react-search-box v3.0.0
Installation
# npm
npm i react-search-box --save
# yarn
yarn add react-search-box
Usage
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 - 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.
3.0.0
1 year ago
2.3.0
2 years ago
2.2.1
2 years ago
2.1.2
2 years ago
2.2.0
2 years ago
2.1.1
3 years ago
2.1.0
3 years ago
2.0.3
3 years ago
2.0.3-next.3
3 years ago
2.0.2
5 years ago
2.0.1
5 years ago
2.0.0
5 years ago
1.0.3
5 years ago
1.0.2
5 years ago
1.0.1
6 years ago
1.0.0
6 years ago
0.0.0-development
6 years ago
0.0.10
6 years ago
0.0.9
6 years ago
0.0.8
6 years ago
0.0.7
6 years ago
0.0.6
7 years ago
0.0.5
7 years ago
0.0.4
7 years ago
0.0.3
7 years ago
0.0.2
7 years ago
0.0.1
7 years ago