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:

NameType(s)DefaultRequired
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

Peer dependencies