Simple React component for a search input, providing a filter function.
npm install react-search-input --save
or
bower install react-search-input --save
var SearchInput = require('react-search-input');
var App = React.createClass({
render() {
var mails = [{
user: {
name: 'Mathieu',
job: 'Software Engineer',
company: 'Enki'
},
subject: 'Hi!'
}, {
user: {
name: 'foo'
},
subject: 'bar'
}, {
user: {
name: 'bar'
},
subject: 'foo'
}];
if (this.refs.search) {
var filters = ['user.name', 'subject'];
mails = mails.filter(this.refs.search.filter(filters));
}
return (
<div>
<SearchInput ref='search' onChange={this.searchUpdated} />
{mails.map(function(mail) {
return (
<div className='mail'>
<div className='from'>{mail.user.name}</div>
<div className='subject'>{mail.subject}</div>
</div>
)
})}
</div>
);
},
searchUpdated(term) {
this.setState({searchTerm: term}); // needed to force re-render
}
});
All props are optional. All other props will be passed to the DOM input.
Class of the Component (in addition of search-input
).
Function called when the search term is changed (will be passed as an argument).
Either an [String]
or a String
. Will be use by the filter
method if no argument is passed there.
Reduce call frequency to the onChange
function (in ms). Default is 200
.
Define if the search should be case sensitive. Default is false
Define the value of the input.
Return a function which can be used to filter an array. keys
can be String
, [String]
or null
.
If an array keys
is an array, the function will return true if at least one of the keys of the item matches the serch term.
Return a function which can be used to filter an array. searchTerm
can be a regex
or a String
. keys
can be String
, [String]
or null
.
If an array keys
is an array, the function will return true if at least one of the keys of the item matches the serch term.
Look at react-search-input.css for an idea on how to style this component.
MIT Licensed