Instant Search

import { useState } from 'react';
import { useInstantSearch, useSearchConfig } from '@glood/hydrogen';

export function SearchBox() {
  const { config } = useSearchConfig();
  const minChars = config?.config.minimum_type_ahead_input_count ?? 2;

  const [term, setTerm] = useState('');
  const { products, suggestions, collections, data, loading } = useInstantSearch(
    { query: term, objects: ['product', 'collection', 'query_suggestion', 'autocorrect'] },
    { skip: term.length < minChars },
  );
  // …render below
}

return (
  <div className="search-box">
    <input value={term} onChange={(e) => setTerm(e.target.value)} placeholder="Search…" />
    {loading && <span className="spinner" />}

    {data?.corrected_query && (
      <button onClick={() => setTerm(data.corrected_query!)}>
        Did you mean <strong>{data.corrected_query}</strong>?
      </button>
    )}

    <ul>
      {suggestions.map((s) => (
        <li key={s.text} onClick={() => setTerm(s.text)}>{s.text}</li>
      ))}
    </ul>

    <div className="grid">
      {products.map((p) => (
        <a key={p.product_id} href={`/products/${p.handle}`}>
          <img src={p.image?.url} alt={p.title} loading="lazy" />
          <span>{p.title}</span>
          <span>{p.display_price ?? p.price}</span>
        </a>
      ))}
    </div>
  </div>
);

const { data } = useInstantSearch({
  query: term,
  trending: { type: 'all', period: '7d', limit: 8 },
});

{term.length < minChars && data?.trending?.searches?.map((t) => (
  <button key={t.term} onClick={() => setTerm(t.term)}>{t.translated_term ?? t.term}</button>
))}