Instant Search for React — One Hook, Your Components, No SDK

// useSearchJet.js — ~25 lines you paste into your app (not a package)
import { useEffect, useState } from 'react';

const API = 'https://app.searchjetengine.com/api/v1/search';
const SEARCH_KEY = 'your_search_api_key'; // search-only key; never use the private key here

export function useSearchJet(query, { limit = 10, filters } = {}) {
  const [data, setData] = useState({ results: [], total: 0 });
  const [loading, setLoading] = useState(false);

  useEffect(() => {
    if (!query) { setData({ results: [], total: 0 }); return; }
    const controller = new AbortController();
    const timer = setTimeout(async () => {
      setLoading(true);
      const params = new URLSearchParams({ q: query, limit: String(limit) });
      if (filters) params.set('filters', filters);
      try {
        const res = await fetch(`${API}?${params}`, {
          headers: { Authorization: `Bearer ${SEARCH_KEY}` },
          signal: controller.signal,
        });
        setData(await res.json()); // { results: [...hits], total, limit, offset, ... }
      } catch {} // aborted or network error
      setLoading(false);
    }, 200); // debounce
    return () => { clearTimeout(timer); controller.abort(); };
  }, [query, limit, filters]);

  return { hits: data.results ?? [], total: data.total ?? 0, loading };
}

// SearchPage.jsx
import { useState } from 'react';
import { useSearchJet } from './useSearchJet';

export default function SearchPage() {
  const [query, setQuery] = useState('');
  const { hits, total } = useSearchJet(query);

  return (
    <div>
      <input value={query} onChange={(e) => setQuery(e.target.value)} placeholder="Search anything..." />
      {query && <p>{total} results</p>}
      {hits.map((hit) => (
        <article key={hit.id} className="p-4 border-b">
          <h3><a href={hit.url}>{hit.title}</a></h3>
          <p>{hit.excerpt}</p>
        </article>
      ))}
    </div>
  );
}

// SearchWithFilters.jsx — uses the useSearchJet hook from the left
import { useState } from 'react';
import { useSearchJet } from './useSearchJet';

const CATEGORIES = ['all', 'docs', 'blog', 'product'];

export function SearchWithFilters() {
  const [query, setQuery] = useState('');
  const [type, setType] = useState('all');

  // "filters" only works on attributes marked filterable in your index
  // settings; otherwise the API returns error code INVALID_FILTER.
  const filters = type === 'all' ? undefined : `type = "${type}"`;
  const { hits, total, loading } = useSearchJet(query, { limit: 20, filters });

  return (
    <div className="flex gap-8">
      {/* Sidebar filters */}
      <aside className="w-64">
        {CATEGORIES.map((c) => (
          <label key={c} className="block">
            <input type="radio" checked={type === c} onChange={() => setType(c)} /> {c}
          </label>
        ))}
      </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"
        />
        {loading ? (
          <p>Searching...</p>
        ) : (
          <>
            {query && <p>{total} results</p>}
            {hits.map((hit) => (
              <article key={hit.id} className="p-4 border-b">
                <h3><a href={hit.url}>{hit.title}</a></h3>
                <p>{hit.excerpt}</p>
              </article>
            ))}
          </>
        )}
      </main>
    </div>
  );
}