This is a small, unobtrusive React component for filtering client-side application data.
npm i react-filter-search
yarn add react-filter-search
React Filter Search is simply a component that requires data in application state (needs to be an array of objects and an input value. In turn, you'll get back...
- filtered data based on user input
- all data in absence of any search input
This data flows back up in the form of renderResults, which is a render prop that returns one of the above. So you'll be responsible for setting up passing in data and an input value.
In this way, React Filter Search is unopinionated about how you store your data and how you handle user input in your application. 🎉
//
/*-Other Imports-*/
//
import FilterResults from 'react-filter-search';
class App extends Component {
constructor(props) {
super(props);
this.state = {
data: [],
value: ''
};
}
componentWillMount() {
fetch('https://jsonplaceholder.typicode.com/users')
.then(response => response.json())
.then(json => this.setState({ data: json }));
}
handleChange = event => {
const { value } = event.target;
this.setState({ value });
};
render() {
const { data, value } = this.state;
return (
<div>
<input type="text" value={value} onChange={this.handleChange} />
<SearchResults
value={value}
data={data}
renderResults={results => (
<div>
{results.map(el => (
<div>
<span>{el.name}</span>
<span>{el.email}</span>
</div>
))}
</div>
)}
/>
</div>
);
}
}The magic 🧙happens in renderResults, which returns an array of objects. Your data has either been filtered based on user input, or not.
Filtering logic will iterate over any level of nesting in your data structure. Which means a good suggestion for this is something like user data or todo items that aren't heavily nested at many levels.
If you wish to filter only using certain attributes then you can use the optional pick prop.
// if each object is of the form
var obj = { name: "Leanne Graham", username: "Bret", email: "Sincere@april.biz", company: {"name": "Romaguera-Crona"} }
<SearchResults
...
pick={['username', 'company.name']}
...
/>
// your objects will be filtered only with the name and company.name fields
// but you can still render other values like username and emailTo render your data, simply use .map() to render to the view--the data retains in the same structure. Return some inline JSX, or feed each element into a stateless React component that renders some UI.
| name | type | required? |
|---|---|---|
value |
string |
true |
data |
array of objects |
true |
renderResults |
func |
true |
pick |
array of strings |
false |
Read CONTRIBUTING.md and join the fun! 🎉