npm i react-search-box --save
If you prefer to use yarn, you can do:
yarn add react-search-box
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)}
/>
)
}
}
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.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.inputBoxFontColor- Color of the text in the input box.inputBoxBorderColor- Color of the border of the input box.inputBoxFontSize- Size of the font of the input box.inputBoxHeight- Height of the input box.dropDownHoverColor- Background color on hover of the dropdown list items.dropDownBorderColor- Border color of the dropdown.
- React - A JavaScript library for building user interfaces
- Jest - Delightful JavaScript Testing
- react-testing-library - Simple and complete React DOM testing utilities that encourage good testing practices.
- Fuse - Lightweight fuzzy-search library. Zero dependencies.
- styled components - Visual primitives for the component age.
MIT Licensed. Copyright (c) Nirmalya Ghosh 2019.