Hooks

import { useState } from "react";
import { useEtoileSearch } from "@etoile-dev/react";

export default function MySearch() {
const [query, setQuery] = useState("");

const { results, isLoading, isError } = useEtoileSearch({
  apiKey: process.env.NEXT_PUBLIC_ETOILE_PUBLIC_KEY,
  collections: ["paintings"],
  query,
  debounceMs: 120,
  shouldRetryOnError: true,
  errorRetryCount: 2,
  errorRetryInterval: 1000,
});

return (
  <div>
    <input
      value={query}
      onChange={(e) => setQuery(e.target.value)}
      placeholder="Search paintings…"
    />

    {isLoading && <p>Searching…</p>}
    {isError && <p>Something went wrong.</p>}

    <ul>
      {results.map((result) => (
        <li key={result.external_id}>{result.title}</li>
      ))}
    </ul>
  </div>
);
}