react-filterable
v0.0.3
Published
Easy filter and controls library for React
Downloads
5
Maintainers
Readme
react-filterable
Easy filtering component for React (ES6)
##Usage
Import the following nodes:
import Filter { Collection, ToggleButton } from 'react-filterable';
Add in the Filter
, Collection
and other controls into your component's render()
function:
render() {
<Filter collection={this.props.myCollectionArray}>
<ToggleButton
active
isolate
name="includesABC"
column="name"
args="ABC">
Includes 'ABC'
</ToggleButton>
<ToggleButton
active
isolate
name="includesDEF"
column="name"
args="DEF">
Includes 'DEF'
</ToggleButton>
<Collection component={MyComponent}/>
</Filter>
}
The MyComponent
component will receive a prop named collection
that contains the filtered items. Iterate over the items as usual to render them:
###MyComponent
render() {
var collectionNodes = [];
this.props.collection.forEach((item, idx) => {
collectionNodes.push(
<Item key={idx} index={idx} item={item} />
);
});
return (
<div>
{collectionNodes}
</div>
);
}