WUI logo

Search

This allows you to search data from a remote API.

version

5.14.0

install

yarn add @welcome-ui/search

usage

import { Search } from '@welcome-ui/search'

About #

It is based on the downshift library.

Usage #

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:

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
}}

To use option groups, you should return the results as follows:

[
{label: 'My first group label', options: [movie1, movie2]}
{label: 'My second group label', options: [serie1, serie2]}
]
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
groupsEnabled
Boolean
icon
ReactElement<any, string | JSXElementConstructor<any>>
itemToString
(item: unknown) => string
minChars
number
3
onChange
(item: unknown, event: { preventDefault: () => void; target: Record<string, unknown>; }) => void
renderGroupHeader
(result: OptionGroup) => ReactElement<any, string | JSXElementConstructor<any>>
renderItem
(item: unknown) => string | ReactElement<any, string | JSXElementConstructor<any>>
search
(query: string) => Promise<unknown>
throttle
number
500
value
unknown
size
"xs"
"sm"
"md"
"lg"
md
variant
"error"
"focused"
"info"
"success"
"warning"
transparent
Boolean
isClearable
Boolean
hasIcon
Boolean
iconPlacement
"right"
"left"
"both"

Packages #

Dependencies #
Peer dependencies #

Previous

RadioTab