react-fuzzy
fuzzy search in React
Installation
npm install --save react-fuzzy
Basic Usage
const list = [{
id: 1,
title: 'The Great Gatsby',
author: 'F. Scott Fitzgerald'
}, {
id: 2,
title: 'The DaVinci Code',
author: 'Dan Brown'
}, {
id: 3,
title: 'Angels & Demons',
author: 'Dan Brown'
}];
<FuzzySearch
list={list}
keys={['author', 'title']}
width={430}
onSelect={(newSelectedItem) => {
// Local state setter defined elsewhere
setSelectedItem(newSelectedItem)
}}
/>
Custom Result Template
<FuzzySearch
list={list}
keys={['author', 'title']}
width={430}
onSelect={(newSelectedItem) => {
// Local state setter defined elsewhere
setSelectedItem(newSelectedItem)
}}
resultsTemplate={(props, state, styles, clickHandler) => {
return state.results.map((val, i) => {
const style = state.selectedIndex === i ? styles.selectedResultStyle : styles.resultsStyle;
return (
<div
key={i}
style={style}
onClick={() => clickHandler(i)}
>
{val.title}
<span style={{ float: 'right', opacity: 0.5 }}>by {val.author}</span>
</div>
);
});
}}
/>
Options
| attribute |
default |
description |
| caseSensitive |
false |
Indicates whether comparisons should be case sensitive. |
| className |
null |
give a custom class name to the root element |
| inputProps |
{} |
Props passed directly to the input element. i.e. defaultValue, onChange, etc. |
| inputStyle |
{} |
Styles passed directly to the input element. |
| inputWrapperStyle |
{} |
Styles passed directly to the input wrapper div. |
| isDropdown |
false |
Hide the result list on blur. |
| listItemStyle |
{} |
Styles passed to each item in the dropdown list. |
| listWrapperStyle |
{} |
Styles passed directly to the dropdown wrapper. |
| selectedListItemStyle |
{} |
Styles passed directly to current 'active' item. |
| width |
430 |
width of the fuzzy searchbox |
| distance |
100 |
Determines how close the match must be to the fuzzy location (specified by location). An exact letter match which is distance characters away from the fuzzy location would score as a complete mismatch. A distance of 0 requires the match be at the exact location specified, a distance of 1000 would require a perfect match to be within 800 characters of the location to be found using a threshold of 0.8. |
| id |
null |
The name of the identifier property. If specified, the returned result will be a list of the items' identifiers, otherwise it will be a list of the items. |
| include |
[] |
An array of values that should be included from the searcher's output. When this array contains elements, each result in the list will be of the form { item: ..., include1: ..., include2: ... }. Values you can include are score, matches. Eg: { include: ['score', 'matches' ] } |
| maxPatternLength |
32 |
The maximum length of the pattern. The longer the pattern, the more intensive the search operation will be. Whenever the pattern exceeds the maxPatternLength, an error will be thrown. |
| onSelect |
noop |
Function to be executed on selection of any result. |
| keyForDisplayName |
title |
The key which should be used for list item text. |
| keys |
all[Array] |
List of properties that will be searched. This also supports nested properties. |
| list |
null |
Array of properties to be filtered. |
| maxResults |
10 |
Max number of results to show at once. |
| placeholder |
'Search' |
Placeholder of the searchbox |
| resultsTemplate |
Func |
Template of the dropdown divs |
| shouldShowDropdownAtStart |
false |
Allow the searchbox to act as a filter dropdown with initial values. Yields all results when the search value is blank. |
| shouldSort |
true |
Whether to sort the result list, by score. |
| sortFn |
Array.prototype.sort |
The function that is used for sorting the result list. |
| threshold |
0.6 |
At what point does the match algorithm give up. A threshold of 0.0 requires a perfect match (of both letters and location), a threshold of 1.0 would match anything. |
| tokenize |
false |
When true, the search algorithm will search individual words and the full string, computing the final score as a function of both. Note that when tokenize is true, the threshold, distance, and location are inconsequential for individual tokens. |
| verbose |
false |
Will print to the console. Useful for debugging. |
License
MIT @ Ritesh Kumar