Search

v2.0.2
duplicate

This allows you to search data from a remote API. It is based on the downshift library.

Install and import

Default

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:

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
icon
union
id
string
itemToString
func
minChars
number
3
name
string
onBlur
func
onChange
func
onClick
func
onFocus
func
onKeyDown
func
placeholder
string
Search…
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