|
2 | 2 | Fast `filterOptions` function for `react-select`; |
3 | 3 | optimized to quickly filter huge options lists. |
4 | 4 |
|
5 | | - |
6 | 5 | ## Getting started |
7 | 6 |
|
8 | | -Install `react-select-fast-filter-options` using npm. |
| 7 | +#### Installation |
| 8 | + |
| 9 | +The easiest way to install is using NPM: |
9 | 10 |
|
10 | 11 | ```shell |
11 | 12 | npm install react-select-fast-filter-options --save |
12 | 13 | ``` |
13 | 14 |
|
14 | 15 | ES6, CommonJS, and UMD builds are available with each distribution. |
15 | | -For example: |
| 16 | +Use npmcdn to access the UMD build: |
| 17 | + |
| 18 | +```html |
| 19 | +<script src="https://npmcdn.com/react-select-fast-filter-options/dist/umd/react-select-fast-filter-options.js"></script> |
| 20 | +``` |
| 21 | + |
| 22 | +Here's how to fast filter with [`react-select`](https://github.com/JedWatson/react-select) or [`react-virtualized-select`](https://github.com/bvaughn/react-virtualized-select): |
16 | 23 |
|
17 | 24 | ```js |
18 | | -// Make sure to import default styles. |
19 | | -// This only needs to be done once, |
20 | | -// Probably during your application's bootstrapping process. |
21 | | -import 'react-virtualized/styles.css' |
22 | | -import 'react-select/dist/react-select.css' |
23 | | -import 'react-virtualized-select/styles.css' |
24 | | - |
25 | | -// Then import the virtualized Select HOC |
26 | | -// This isn't required but it is suggested- |
27 | | -// This way large lists will also display quickly |
28 | | -// For more info see https://github.com/bvaughn/react-virtualized-select |
29 | | -import VirtualizedSelect from 'react-virtualized-select' |
30 | | - |
31 | | -// Create a search index optimized to quickly filter options |
32 | | -// This is powered by js-search |
33 | | -// Configuration options available here: https://github.com/bvaughn/js-search |
| 25 | +// Import the Select component from either react-select or react-virtualized-select |
| 26 | +import Select from 'react-virtualized-select' // or from 'react-select' |
| 27 | + |
| 28 | +// Import the fast-filter library |
| 29 | +import createFilterOptions from 'react-select-fast-filter-options' |
| 30 | + |
| 31 | +// Create a search index optimized to quickly filter options. |
| 32 | +// The search index will need to be recreated if your options array changes. |
| 33 | +// This index is powered by js-search: https://github.com/bvaughn/js-search |
34 | 34 | const filterOptions = createFilterOptions({ options }) |
35 | 35 |
|
36 | | -// Render the windowed react-select (powered by react-virtualized) |
37 | | -// Wired up with the fast filter function |
38 | | -<VirtualizedSelect |
39 | | - filterOptions={filterOptions} |
40 | | - options={options} |
41 | | - {...props} |
42 | | -/> |
| 36 | +// Render your Select, complete with the fast-filter index |
| 37 | +function render ({ options }) { |
| 38 | + return ( |
| 39 | + <Select |
| 40 | + filterOptions={filterOptions} |
| 41 | + options={options} |
| 42 | + {...otherSelectProps} |
| 43 | + /> |
| 44 | + ) |
| 45 | +} |
43 | 46 | ``` |
| 47 | + |
| 48 | +## Configuration |
| 49 | + |
| 50 | +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`](https://github.com/bvaughn/js-search) configuration options. |
| 51 | + |
| 52 | +The following table shows all supported parameters and their default values: |
| 53 | + |
| 54 | +| Property | Type | Default | Description | |
| 55 | +|:---|:---|:---|:---| |
| 56 | +| `indexStrategy` | [`IIndexStrategy`](https://github.com/bvaughn/js-search/blob/master/source/index-strategy/index-strategy.ts) | [`AllSubstringsIndexStrategy`](https://github.com/bvaughn/js-search/blob/master/source/index-strategy/all-substrings-index-strategy.ts) | See [js-search docs](https://github.com/bvaughn/js-search) | |
| 57 | +| `labelKey` | string | "label" | Option key containing the display text | |
| 58 | +| `options` | array | [] | Array of options objects | |
| 59 | +| `sanitizer` | [`ISanitizer`](https://github.com/bvaughn/js-search/blob/master/source/sanitizer/sanitizer.ts) | [`LowerCaseSanitizer`](https://github.com/bvaughn/js-search/blob/master/source/sanitizer/lower-case-sanitizer.ts) | See [js-search docs](https://github.com/bvaughn/js-search) | |
| 60 | +| `searchIndex` | [`ISearchIndex`](https://github.com/bvaughn/js-search/blob/master/source/search-index/search-index.ts) | [`UnorderedSearchIndex`](https://github.com/bvaughn/js-search/blob/master/source/search-index/unordered-search-index.ts) | See [js-search docs](https://github.com/bvaughn/js-search) | |
| 61 | +| `tokenizer` | [`ITokenizer`](https://github.com/bvaughn/js-search/blob/master/source/tokenizer/tokenizer.ts) | [`SimpleTokenizer`](https://github.com/bvaughn/js-search/blob/master/source/tokenizer/simple-tokenizer.ts) | See [js-search docs](https://github.com/bvaughn/js-search) | |
| 62 | +| `valueKey` | string | "value" | Option key containing the value | |
0 commit comments