React tree select component based on [react-select](https://github.com/JedWatson/react-select#react-select) with [react-window](https://github.com/bvaughn/react-window)-based rendering of options.
npm install intelligent-tree-selectReact tree select component based on react-select
and virtualization with react-window.
#### Before start
Before you can use this component you will need Node.js in version 14+, but we recommend
using the latest available version.
Easiest way is to install via NPM
``
npm install intelligent-tree-select --save
Then import it
`
import { IntelligentTreeSelect } from "intelligent-tree-select"
import "intelligent-tree-select/lib/styles.css"
Usage example can be found in examples/demo.js
Props types are the same as the ones introduced by react-select.
Additional parameters introduced by _intelligent-tree-select_ are:
| Property | Type | Default Value | Description |
| :---------------- | :--------------------- | :------------ | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| fetchOptions | func | - | Function used to fetch options. See below for argument description. |number
| fetchLimit | | 100 | Size of a page loaded in one request via fetchOptions |number
| searchDelay | | - | Delay in milliseconds between the input change and fetchOptions invocation. Allows to wait for reasonable user input before actually invoking search on the server. By default the search is invoked with no delay. |Array
| options |
#### Fetch Options Function
The component can either be provided all options to render in props, or a function used to fetch options as necessary.
This function should support:
1. Searching by string (component input). If search string is provided, options should be provided including their ancestors.
2. Paging
3. Fetching children of a node
The function is passed an object with the following attributes:
| Attribute | Type | Description |
| :----------- | :------- | :---------------------------------------------------------------------------------------------------- |
| searchString | string | Search string entered by the user. Possibly empty. |string
| optionID | | Identifier of the option being expanded (whose children should be fetched). Possibly undefined/empty. |number
| limit | | Number of options to fetch (page size). Based on fetchLimit property. |number
| offset | | Fetch offset. |object
| option | | Th option being expanded. Possibly undefined. |
#### Custom Option Renderer
You can override the built-in option renderer by specifying your own optionRenderer property. Your renderer should
return a React element that represents the specified option. It will be passed the following named parameters:
| Property | Type | Description |
| :---------- | :-------------- | :------------------------------------------------------------ |
| data | Array
#### SelectProps
If you override the optionRenderer the react-select props are passed in the selectProps property. It gives you
access to the internals of the select. Some useful properties are listed below.
| Property | Type | Description |
| :------------- | :--------- | :------------------------------------------------------------------------------------------------ |
| childrenKey | string | Attribute of option that contains the children key. |string
| key | | A unique identifier for each element created by the renderer. |string
| labelKey | | Attribute of option that contains the display text. |Function
| getOptionLabel | | Function to extract label from an option. If specified, overrides labelKey. |bool
| renderAsTree | | Whether the options should be render as a tree. |string
| searchString | | Current content of the search input. |Function
| onOptionSelect | | Callback to update the selected values; for example, you may want to call this function on click. |Function
| onOptionToggle | | Expand/Collapse option if it has children. |string
| valueKey | | Attribute of option that contains the value. |
The following methods can be called on instances of the intelligent-tree-select component (accessed via a ref).
| Method | Description |
| :------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| resetOptions | Force reloading of options when fetchOptions property is used to specify how to load options. If options are specified in props, this reloads them from the current props. |getOptions
| | Gets the options (flattened) currently provided by the component. |focus
| | Focus the tree select input. |blurInput` | Blur the tree select input. |
|