React component that renders filtering Input
React component that renders filtering Input
``sh`
npm install --save react react-text-filter
Don't forget to manually install peer dependencies (react) if you use npm@3.
`htmlTextFilter
(Module exposed as )`
http://nkbt.github.io/react-text-filter
http://codepen.io/nkbt/pen/ZGmpoO
js
import React, {PropTypes} from 'react';
import ReactDOM from 'react-dom';
import {TextFilter} from 'react-text-filter';
const Item = React.createClass({
propTypes: {
item: PropTypes.string.isRequired
},
render() {
return
{this.props.item} ;
}
});
const List = React.createClass({
propTypes: {
items: PropTypes.arrayOf(PropTypes.string).isRequired
},
render() {
const Items = this.props.items.map(item =>
return
{Items}
;
}
});
const fruits = [
'apple',
'orange',
'banana',
'kiwi',
'pineapple',
'golden kiwi',
'green apple'
];
const fruitFilter = filter => fruit => fruit.toLowerCase().indexOf(filter.toLowerCase()) !== -1;
const App = React.createClass({
getInitialState() {
return {filter: ''};
},
render() {
const filteredFruits = this.state.filter ?
fruits.filter(fruitFilter(this.state.filter)) :
fruits.slice(0);
return (
this.setState({filter})} />
);
}
});const appRoot = document.createElement('div');
document.body.appendChild(appRoot);
ReactDOM.render(
`Options
####
: PropTypes.func.isRequiredFunction called when filter is changed (debounced) with original event passed through
####
filter: PropTypes.string (default: '')Initial filter value
####
minLength: PropTypes.number (default: 2)Minimal length of text to start notify
####
debounceTimeout: PropTypes.number (default: 300)Notification debounce timeout in ms
#### Arbitrary props will be transferred to the rendered
js
placeholder="Filter"
className="my-filter" />
`Will result in
js
placeholder="Filter"
className="my-filter" />
``MIT