Get started

React searchbar

Add search to your React app in three ways.

Searchbar

"use client";

import { useRouter } from "next/navigation";
import "@etoile-dev/react/styles.css";
import { Searchbar } from "@etoile-dev/react";

export default function App() {
const router = useRouter();

return (
  <Searchbar
    apiKey={process.env.NEXT_PUBLIC_ETOILE_PUBLIC_KEY}
    collections={["paintings", "artists"]}
    onSelectResult={(result) => router.push(`/work/${result.external_id}`)}
  />
);
}

Command palette

"use client";

import { useRouter } from "next/navigation";
import "@etoile-dev/react/styles.css";
import { SearchModal } from "@etoile-dev/react";

export default function App() {
const router = useRouter();

return (
  <SearchModal
    apiKey={process.env.NEXT_PUBLIC_ETOILE_PUBLIC_KEY}
    collections={["paintings"]}
    hotkey="mod+k"
    onSelectResult={(result) => router.push(`/work/${result.external_id}`)}
  />
);
}

Hook + your UI

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,
  shouldRetryOnError: true,
});

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>
);
}

Related