React Filter Search 🔍

This is a small, unobtrusive React component for filtering client-side application data.

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 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: "[email protected]", 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 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 objects	true
renderResults	func	true
pick	array of strings	false

Contributions

Read CONTRIBUTING.md and join the fun! 🎉