https://github.com/joehdodd/react-filter-search
A small React component for filtering client-side application data. 📈💻
https://github.com/joehdodd/react-filter-search
filter react react-component react-filter react-search reactjs reactjs-components search
Last synced: 3 months ago
JSON representation
A small React component for filtering client-side application data. 📈💻
- Host: GitHub
- URL: https://github.com/joehdodd/react-filter-search
- Owner: joehdodd
- License: mit
- Created: 2018-09-05T00:31:11.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2023-02-21T14:35:20.000Z (over 2 years ago)
- Last Synced: 2025-03-12T01:25:49.629Z (3 months ago)
- Topics: filter, react, react-component, react-filter, react-search, reactjs, reactjs-components, search
- Language: JavaScript
- Homepage:
- Size: 1.32 MB
- Stars: 34
- Watchers: 0
- Forks: 12
- Open Issues: 6
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
README
# React Filter Search 🔍
[![Travis][build-badge]][build]
[![npm package][npm-badge]][npm]
[![Coveralls][coveralls-badge]][coveralls]
This is a small, unobtrusive React component for filtering client-side application data.
[build-badge]: https://img.shields.io/travis/joehdodd/react-filter-search/master.png?style=flat-square
[build]: https://travis-ci.org/joehdodd/react-filter-search
[npm-badge]: https://img.shields.io/npm/v/react-filter-search.png?style=flat-square
[npm]: https://www.npmjs.org/package/react-filter-search
[coveralls-badge]: https://img.shields.io/coveralls/joehdodd/react-filter-search/master.png?style=flat-square
[coveralls]: https://coveralls.io/github/joehdodd/react-filter-search
## Installation
`npm i react-filter-search`
`yarn add react-filter-search`
## Usage
React Filter Search is simply a component that requires data in application state (needs to be an `array` of `object`s 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. 🎉
```javascript
//
/*-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 (
(
{results.map(el => (
{el.name}
{el.email}
))}
)}
/>
);
}
}
```
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.
```javascript
// if each object is of the form
var obj = { name: "Leanne Graham", username: "Bret", email: "[email protected]", company: {"name": "Romaguera-Crona"} }
// your objects will be filtered only with the name and company.name fields
// but you can still render other values like username and email
```
To 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.
## `props`
| name | type | required?|
| ---------------- |----------------------| ---------|
| `value` | `string` | `true` |
| `data` | `array` of `object`s | `true` |
| `renderResults` | `func` | `true` |
| `pick` | `array` of `string`s | `false` |
## Contributions
Read [`CONTRIBUTING.md`](https://github.com/joehdodd/react-filter-search/blob/master/CONTRIBUTING.md) and join the fun! 🎉