Instant Search for React — Hooks, Components & TypeScript

// SearchPage.tsx
import { SearchProvider, SearchBox, Hits, Highlight } from '@searchjet/react';

export default function SearchPage() {
  return (
    <SearchProvider
      indexName="your_index"
      searchApiKey="your_search_api_key"
    >
      <SearchBox placeholder="Search anything..." />
      <Hits>
        {({ hit }) => (
          <article className="p-4 border-b">
            <h3>
              <Highlight attribute="title" hit={hit} />
            </h3>
            <p>
              <Highlight attribute="content" hit={hit} />
            </p>
          </article>
        )}
      </Hits>
    </SearchProvider>
  );
}

// SearchWithFilters.tsx
import { useSearch, useHits, useFacets } from '@searchjet/react';

export function SearchWithFilters() {
  const { query, setQuery, isSearching } = useSearch();
  const { hits } = useHits();
  const { facets } = useFacets();

  return (
    <div className="flex gap-8">
      {/* Sidebar filters */}
      <aside className="w-64">
        {facets.map(facet => (
          <FacetGroup key={facet.name} facet={facet} />
        ))}
      </aside>

      {/* Results */}
      <main className="flex-1">
        <input
          type="text"
          value={query}
          onChange={(e) => setQuery(e.target.value)}
          placeholder="Search products..."
          className="w-full p-3 border rounded-lg"
        />
        {isSearching ? (
          <Spinner />
        ) : (
          hits.map(hit => (
            <ProductCard key={hit.objectID} hit={hit} />
          ))
        )}
      </main>
    </div>
  );
}