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);