react-filtered

Composable components for flexible filtering.

Installation

yarn add react-filtered

Usage

Consuming filtered results

Grant access to specific trees by using the Grant.

import { FilterScope, FilterResult } from "react-filtered";

<FilterScope>
  <FreeTextSearch />

  <FilterResult items={["abc", "123", "def"]}>
    {filteredItems => filteredItems.map(item => <div>{item}</div>)}
  </FilterResult>
</FilterScope>;

filterController HOC

To create components which provides filters in the scope you can use the filterController HOC, which will provide unsetFilter() and setFilter(filterFunc) functions to your component.

Example usage of filterController

import { filterController } from "react-filtered";

class FreeTextSearch extends Component {
  onChange = evt => {
    const filter = evt.target.value;

    if (filter.length === 0) {
      this.props.unsetFilter();
    } else {
      this.props.setFilter(items =>
        items.filter(item => item.includes(filter))
      );
    }
  };

  render() {
    return <input onChange={this.onChange} />;
  }
}

export default filterController(FreeTextSearch);