Welcome UI - Customizable design system with react

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 * as React from 'react'
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 (
    // TODO: fix typescript
    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
    // @ts-ignore
    <Search
      itemToString={(item: Item) => item && item.Title}
      name="movies"
      placeholder="Search a movie"
      renderItem={(item: Item) => (
        <div style={{ display: 'flex', alignItems: 'center' }}>{item.Title}</div>
      )}
      search={searchFunction}
    />
  )
}

export default Example

Installation

Run the following command:

yarn add @welcome-ui/search

Import component:

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

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