Search
This allows you to search data from a remote API. It is based on the downshift library.
Install and import
Default
With option groups
To use option groups, you must provide two additional props: groupsEnabled
that allow nested options and renderGroupHeader
that renders the header of a specific group
Properties
There are several core props you must pass through:
search
An async function (async/await or Promises) that takes a search string and returns an array of results (items
).
For example, given an API call to https://www.omdbapi.com?s=fish that returns a payload like this:
We could pass the following prop to the Search
component:
To use option groups, you should return the results as follows:
renderItem
A component that renders each of the results in the list e.g.
itemToString
A function that converts a selected result to a string e.g.
All properties
The rest of the props are below:
Name | Type(s) | Default | Required |
---|---|---|---|
autoComplete | string | off | |
autoFocus | bool | ||
disabled | bool | ||
groupsEnabled | bool | ||
icon | union | ||
id | string | ||
itemToString | func | ||
minChars | number | 3 | |
name | string | ||
onBlur | func | ||
onChange | func | ||
onClick | func | ||
onFocus | func | ||
onKeyDown | func | ||
placeholder | string | Search… | |
renderGroupHeader | func | ||
renderItem | func | ||
search | func | ||
size | sm md lg | lg | |
throttle | number | 500 | |
value | object | arrayOf | string | arrayOf | number | arrayOf | ||
variant | error info success valid warning |
Dependencies
- - @welcome-ui/clear-button^3.0.0-alpha.2
- - @welcome-ui/icon^3.0.0-alpha.2
- - @welcome-ui/system^3.0.0-alpha.2
- - @welcome-ui/tag^3.0.0-alpha.2
- - @welcome-ui/utils^3.0.0-alpha.2
- - downshift^6.0.15
Peer dependencies
- - @xstyled/styled-components^2.1.0
- - @xstyled/system^2.1.0
- - prop-types^15.7.2
- - react^16.10.2 || ^17.0.1
- - react-dom^16.10.2 || ^17.0.1
- - styled-components^5.0.0