react-search-input


> Simple React component for a search input, providing a filter function.

$3

Install

``bash
npm install react-search-input --save
`

Example

`javascript
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 (


)
}

searchUpdated (term) {
this.setState({searchTerm: term})
}
}

`

API

$3

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.

$3

##### 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.

$3

##### 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