Search

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

Install and import

yarn add @welcome-ui/search @xstyled/styled-components @xstyled/system prop-types react react-dom styled-components
import { Search } from '@welcome-ui/search'

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:

{
Search: [
{Title: "Big Fish", Year: "2003", imdbID: "tt0319061", Type: "movie",},
{Title: "A Fish Called Wanda", Year: "1988", imdbID: "tt0095159", Type: "movie",},
{Title: "Fish Tank", Year: "2009", imdbID: "tt1232776", Type: "movie",},
{Title: "Rumble Fish", Year: "1983", imdbID: "tt0086216", Type: "movie",},
{Title: "Cold Fish", Year: "2010", imdbID: "tt1632547", Type: "movie",},
],
totalResults: "895",
Response: "True"
}

We could pass the following prop to the Search component:

search={async function asyncSearch(query) {
const response = await fetch('https://www.omdbapi.com?apikey=' + YOUR_API_KEY + '&s=' + query)
const data = await response.json()
return data.Search
}}

renderItem

A component that renders each of the results in the list e.g.

renderItem={item => <div>{item.Title} ({item.Year})</div>}

itemToString

A function that converts a selected result to a string e.g.

itemToString={item => item && item.Title}

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