Skip to content

A small React component for filtering client-side application data. πŸ“ˆπŸ’»

License

Notifications You must be signed in to change notification settings

joehdodd/react-filter-search

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Β 

History

87 Commits
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 

Repository files navigation

React Filter Search πŸ”

Travis npm package Coveralls

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! πŸŽ‰

About

A small React component for filtering client-side application data. πŸ“ˆπŸ’»

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published