Welcome UI - Search

The Search component is an input field designed for querying and retrieving information from a dataset or database. It typically includes features such as autocomplete, suggestions, and filters to enhance the search experience. This component helps users quickly find specific content or data within an application, improving overall usability and efficiency.

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

type Item = { Title: string }

const Example = () => {
  const searchFunction = async (s: string) => {
    const response = await fetch(`https://www.omdbapi.com?apikey=41514363&s=${s}`)
    const data = await response.json()
    return data.Search
  }

  return (
    <Search
      itemToString={(item: Item) => item && item.Title}
      name="movies"
      placeholder="Search a movie"
      renderItem={(item: Item) => (
        <div style={{ alignItems: 'center', display: 'flex' }}>{item.Title}</div>
      )}
      search={searchFunction}
    />
  )
}

export default Example

Examples

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