Really simple search component, plug and play where you define two callbacks that are triggered when the search text has changed or when the user clicks on the search button. It will trigger back the defined function with the typed String as param so you
npm install react-js-search
npm i react-js-search
`
Usage
Import SearchBar in your react component.
`javascript
import SearchBar from 'react-js-search';
`
You can pass an array of objects where you want to look data for, for instance:
`jacascript
[
{number: 12, name:"Buffon", position: "ST", success: true},
{number: 21, name: "Pirlo", position: "MC", success: false},
{number: 10, name: "Ruiz", position: "MDI"},
{number: 7, name: "Nesta", position: "RB", success: true},
{number: 4, name: "Cannavaro", position: "CB"},
{number: 2, name: "Puyol", position: "CB", success: false},
{number: 15, name: "Abate", position: "LB"},
{number: 16, name: "Locatelli", position: "MDI"},
{number: 1, name: "Buffon", position: "GK"},
{number: 21, name: "Pirlo", position: "MC"},
{number: 10, name: "Ruiz", position: "MDI"},
{number: 7, name: "Nesta", position: "RB"}
]
`
When the user do a search of a term the string typed will be used as haystack and data passed as prop will be used for the search. The search will be done looking at all values in object and will return the term search used and an array of objects that had a hit.
For example:
`javascript
onSearchButtonClick={this.onSearchClick}
placeHolderText={"Search here..."}
data={this.state.dataObjects}
/>
``