react-search-input
Simple React component for a search input, providing a filter function.
Demo
Install
npm install react-search-input --save
Example
import React, {Component} from 'react' import SearchInput, {createFilter} from 'react-search-input' import emails from './mails' const KEYS_TO_FILTERS = ['user.name', 'subject', 'dest.name'] class App extends Component { constructor (props) { super(props) this.state = { searchTerm: '' } this.searchUpdated = this.searchUpdated.bind(this) } render () { const filteredEmails = emails.filter(createFilter(this.state.searchTerm, KEYS_TO_FILTERS)) return ( <div> <SearchInput className="search-input" onChange={this.searchUpdated} /> {filteredEmails.map(email => { return ( <div className="mail" key={email.id}> <div className="from">{email.user.name}</div> <div className="subject">{email.subject}</div> </div> ) })} </div> ) } searchUpdated (term) { this.setState({searchTerm: term}) } }
API
Props
All props are optional. All other props will be passed to the DOM input.
className
Class of the Component (in addition of search-input
).
onChange
Function called when the search term is changed (will be passed as an argument).
filterKeys
Either an [String]
or a String
. Will be use by the filter
method if no argument is passed there.
throttle
Reduce call frequency to the onChange
function (in ms). Default is 200
.
caseSensitive
Define if the search should be case sensitive. Default is false
fuzzy
Define if the search should be fuzzy. Default is false
sortResults
Define if search results should be sorted by relevance (only works with fuzzy search). Default is false
value
Define the value of the input.
Methods
filter([keys])
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 search term.
Static Methods
filter(searchTerm, [keys], [{caseSensitive, fuzzy, sortResults}])
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 search term.
Styles
Look at react-search-input.css for an idea on how to style this component.
MIT Licensed