React searchbar

Add a search bar to your React app in one line.

Drop-in component

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

export default function App() {
return (
  <Search
    apiKey={process.env.NEXT_PUBLIC_ETOILE_PUBLIC_KEY}
    collections={["paintings"]}
  />
);
}

Headless hook

For full control, use the useSearch hook:

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

export default function MySearch() {
const { query, setQuery, results, isLoading } = useSearch({
  apiKey: process.env.NEXT_PUBLIC_ETOILE_PUBLIC_KEY,
  collections: ["paintings"],
});

return (
  <div>
    <input
      value={query}
      onChange={(e) => setQuery(e.target.value)}
      placeholder="Search paintings..."
    />
    <ul>
      {results.map((result) => (
        <li key={result.external_id}>{result.title}</li>
      ))}
    </ul>
  </div>
);
}

Related