SearchSelect
A custom select component with a client side filter
Note: This component doesn't handle any async, the results to filter through have to be fetched beforehand
Import
import { SearchSelect, Highlight } from '@outfitio/outkit';
Basic Usage
Pass in an array of options that will be filtered.
Control how items in the drop down render by passing in a function as children.
The child function gets executed once for each matching item in the list, with the argument result. (The item in the
options list, eg: 'John Appleseed')
Advanced (Kitchen sink) usage
The below examples leverage a few extra props to completely transform the behaviour of the search select
props.inputRender
You might want to show a special 'selected' state on the input, or even just pass in a custom icon.
The inputRender render prop lets you pass in custom react components to achieve any extra input functionality.
Just remember to spread on the inputProps argument to the input.
props.options
Options can either be strings or an array of objects.
You can pass in a filterBy prop to tell SearchSelect which key in the object to filter by (eg name, movie.title)
Defaults to name if options are provided as objects
A color selector that only allows 'exact' matches.
A font picker, that lets you input a custom value or select a 'Google font'.
Props
Any extra props (eg: css) will be spread onto the wrapping Box element.
| Property | Type | Required | Default | Description |
|---|---|---|---|---|
charsBeforeSearch | number | No | 2 | Amount typed before filtering starts |
children | func | Yes | Function that renders a result from the search | |
filterBy | string | No | 'name' | Key to perform filtering on, (if options are objects) |
max | number | No | 3 | Max amount of results to display at a time |
onEscape | func | No | Callback that gets fired when escape is pressed. Useful for resetting the value. Callback is executed with an `exactMatch` arg. if the value is 'matching' at the time escape is pressed | |
onBlur | func | No | Callback that gets fired when the input is blurred Callback is executed two two arguments, First an `exactMatch` arg. if the value is 'matching' at the time the input is blurred, and second a `reason` that the input was blurred, one of `select/click/escape` | |
onChange | func | Yes | Callback that gets fired when the input is changed | |
onSelect | func | No | Callback that gets fired when an item from the list is selected | |
options | array | Yes | Array of either objects or strings to filter. If array of objects, the 'filterBy' prop is the key the object is filtered by' | |
placeholder | string | No | 'Start typing...' | Placeholder for the inpit |
size | string | No | Input size props | |
value | string | Yes | Value of the input | |
blurOnSelect | | No | true |