AACsearch für React

Füge deiner React-App typolerante Sofortsuche hinzu. Hooks, Widgets und SDKs – alles dabei.

Suche für React-Apps

Der AACsearch-Browser-SDK exportiert React-Hooks und Komponenten. Füge Suche in Minuten hinzu.

React-SDK

Das AACsearch-React-Paket installieren. Hooks für Suche, Autocomplete und Facetten. Vollständige TypeScript-Typen, keine Peer-Abhängigkeiten.

Such-Hooks

useSearch, useFacets und useInfiniteResults lassen dich eigene Suchoberflächen mit minimalem State-Management bauen.

Drop-in-Komponenten

SearchBox, FacetList und ResultCard sind vorgefertigte Komponenten für gängige Such-UI-Muster.

SSR & Hydration

Suchergebnisse serverseitig vorab laden und clientseitig ohne Flash of Empty Content hydrieren.

TypeScript-Unterstützung

Alle Hooks und Komponenten sind vollständig typisiert. Prop-Fehler werden zur Buildzeit abgefangen.

Event-Tracking

Das SDK enthält einen trackEvent-Aufruf für Ergebnisklicks, Filter-Nutzung und Zero-Result-Reporting. Speist das AACsearch-Dashboard.

Suche in 3 Schritten zu deiner React-App hinzufügen

Funktioniert mit React 17, 18 und 19. Framework-agnostisch — Next.js, Remix, Vite und CRA werden unterstützt.

  1. 1

    Schritt 1

    Paket installieren

    npm install @aacsearch/react in deinem Projekt ausführen.

  2. 2

    Schritt 2

    Den useSearch-Hook verwenden

    Übergib deinen API-Schlüssel und den Index-Slug. Der Hook gibt Treffer, Ladezustand und eine setQuery-Funktion zurück.

  3. 3

    Schritt 3

    Ergebnisse rendern

    Iteriere über die Treffer und zeige sie in deiner eigenen UI an. Keine Pflicht-Wrapper-Komponenten — volle Gestaltungsfreiheit.

API-Referenz durchsuchen

Minimales useSearch-Beispiel

typescript
import { useSearch } from '@aacsearch/react'

export function SearchBox() {
  const { query, setQuery, hits, isLoading } = useSearch({
    apiKey: 'ss_search_your_key',
    index: 'products',
  })
  return (
    <div>
      <input
        value={query}
        onChange={(e) => setQuery(e.target.value)}
        placeholder="Search products..."
      />
      {isLoading && <span>Loading...</span>}
      {hits.map((hit) => <div key={hit.id}>{hit.name}</div>)}
    </div>
  )
}

Häufig gestellte Fragen

Search OS in einem Abend starten

Erstellen Sie einen Index, fügen Sie Dokumente hinzu und verbinden Sie die Suche von Ihrer App. Free-Tier deckt ein Prototyp ab — Daten bleiben beim Upgrade erhalten.

Kostenlos startenDokumentation öffnen