Fast filterOptions function for react-select;
optimized to quickly filter huge options lists.
The easiest way to install is using NPM:
npm install react-select-fast-filter-options --saveES6, CommonJS, and UMD builds are available with each distribution. Use npmcdn to access the UMD build:
<script src="https://npmcdn.com/react-select-fast-filter-options/dist/umd/react-select-fast-filter-options.js"></script>Here's how to fast filter with react-select or react-virtualized-select:
// Import the Select component from either react-select or react-virtualized-select
import Select from 'react-virtualized-select' // or from 'react-select'
// Import the fast-filter library
import createFilterOptions from 'react-select-fast-filter-options'
// Create a search index optimized to quickly filter options.
// The search index will need to be recreated if your options array changes.
// This index is powered by js-search: https://github.com/bvaughn/js-search
const filterOptions = createFilterOptions({ options })
// Render your Select, complete with the fast-filter index
function render ({ options }) {
return (
<Select
filterOptions={filterOptions}
options={options}
{...otherSelectProps}
/>
)
}By default, createFilterOptions returns a filter function configured to match all substrings, in a case-insensitive way, and return results in their original order. However it supports all of the underlying js-search configuration options.
The following table shows all supported parameters and their default values:
| Property | Type | Default | Description |
|---|---|---|---|
indexStrategy |
IIndexStrategy |
AllSubstringsIndexStrategy |
See js-search docs |
labelKey |
string | "label" | Option key containing the display text |
options |
array | [] | Array of options objects |
sanitizer |
ISanitizer |
LowerCaseSanitizer |
See js-search docs |
searchIndex |
ISearchIndex |
UnorderedSearchIndex |
See js-search docs |
tokenizer |
ITokenizer |
SimpleTokenizer |
See js-search docs |
valueKey |
string | "value" | Option key containing the value |