Skip to content

Commit b8661fe

Browse files
committed
Improved README instructions
1 parent 6db2b76 commit b8661fe

File tree

1 file changed

+45
-26
lines changed

1 file changed

+45
-26
lines changed

README.md

Lines changed: 45 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -2,42 +2,61 @@
22
Fast `filterOptions` function for `react-select`;
33
optimized to quickly filter huge options lists.
44

5-
65
## Getting started
76

8-
Install `react-select-fast-filter-options` using npm.
7+
#### Installation
8+
9+
The easiest way to install is using NPM:
910

1011
```shell
1112
npm install react-select-fast-filter-options --save
1213
```
1314

1415
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):
1623

1724
```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
3434
const filterOptions = createFilterOptions({ options })
3535

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+
}
4346
```
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

Comments
 (0)