Search
This allows you to search data from a remote API.
version
5.0.0-alpha.16
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:
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}}
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:
| Name | Type(s) | Default | Required |
|---|---|---|---|
| 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" |