import { Search } from 'react-search-dialog';

type User = {
  id: string;
  name: string;
  // A label property is required if not using a string array as your item list!
  label: string;
};

const items: User[] = [
  { id: '1', label: 'Item 1', name: 'Justin' },
  { id: '2', label: 'Item 2', name: 'Nick' },
  { id: '3', label: 'Item 3', name: 'Dan' },
  { id: '4', label: 'Item 4', name: 'Adam' },
  { id: '5', label: 'Item 5', name: 'Caleb' },
];

const App = () => {
  return (
    <Search items={items} onItemSelect={(item) => console.log(item.label)} />
  );
};

import { useCallback } from 'react';
import { Search, RenderItemArgs } from 'react-search-dialog';

type CoffeeItem = {
  id: string;
  imgUrl: string;
  // A label property is required if not using a string array as your item list!
  label: string;
};

const items: CoffeeItem[] = [
  { id: '1', label: 'Latte', imgUrl: 'example.com/latte.png' },
  { id: '2', label: 'Macchiato', imgUrl: 'example.com/macchiiato.png' },
  { id: '3', label: 'Cappuccino', imgUrl: 'example.com/cappuccino.png' },
  { id: '4', label: 'Cold Brew', imgUrl: 'example.com/coldbrew.png' },
  { id: '5', label: 'Affogato', imgUrl: 'example.com/affogato.png' },
];

const renderResult = useCallback(
  ({ item, smallDisplay, closeDialog, addToRecents }: RenderItemArgs<Client>) => (
    <div
      onClick={() => {
        // Adds the item to the recent search history
        // if `noHistory` is not set to true.
        addToRecents();
        // Clsoes the search dialog.
        closeDialog();
      }}
      style={{
        // Since we're utilizing react-window, it might be a good idea
        // to set a fixed height on your result items in some circumstances.
        height: '100',
      }}
    >
      {/* If the display is small, we'll only show the label */}
      {smallDisplay ? item.label : (
        <div style={{ display: 'flex', alignItems: 'center' }}>
          <img src={item.imgUrl} alt={item.label} />
          <h3>{item.label}</h3>
        </div>
      )}
    </div>
  ),
  []
);

const App = () => {
  return (
    <Search
      items={items}
      itemHeight={100}
      onItemSelect={(item) => console.log(item)}
      renderResult={renderResult}
    />
  );
};