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 #

Movies
Show editor

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

Movies & Series
Show editor

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:

Dependencies #

• - @welcome-ui/clear-button
  ^3.4.3
• - @welcome-ui/icon
  ^3.0.0
• - @welcome-ui/system
  ^3.0.0
• - @welcome-ui/tag
  ^3.5.0
• - @welcome-ui/utils
  ^3.4.3
• - downshift
  ^6.1.0

Peer dependencies #

• - @xstyled/styled-components
  ^2.2.3
• - @xstyled/system
  ^2.2.3
• - prop-types
  ^15.7.2
• - react
  ^16.10.2 || ^17.0.1
• - react-dom
  ^16.10.2 || ^17.0.1
• - styled-components
  ^5.2.1