AACsearch pour React
Ajoutez une recherche instantanée tolérante aux fautes à votre application React. Hooks, widgets et SDKs inclus.
AACsearch pour React
Composants et hooks React pour créer des interfaces de recherche puissantes et personnalisables.
SDK React
Installez le package React AACsearch. Hooks pour la recherche, l'autocomplétion et les facettes. Types TypeScript complets, zéro dépendance pair.
Hooks de recherche
useSearch, useFacets, usePagination et plus. Créez des interfaces personnalisées avec une logique d'état gérée.
Composants prêts à l'emploi
SearchBox, Hits, Facets, Pagination, Highlight. Personnalisation complète via className et render props.
SSR et hydratation
Pré-chargez les résultats de recherche côté serveur et hydratez côté client sans flash de contenu vide.
Support TypeScript complet
Les types du SDK sont générés depuis la spécification OpenAPI d'AACsearch. Autocomplétion pour chaque champ de votre schéma de collection.
Suivi d'événements
Le SDK inclut un appel trackEvent pour les clics sur les résultats, l'utilisation des filtres et les rapports de résultats nuls. Alimente votre tableau de bord AACsearch.
Ajouter la recherche à votre app React en 3 étapes
Compatible avec React 17, 18 et 19. Agnostique au framework — Next.js, Remix, Vite et CRA sont supportés.
- 1
Étape 1
Installer le package
Exécutez npm install @aacsearch/react dans votre projet.
- 2
Étape 2
Utiliser le hook useSearch
Passez votre clé API et le slug d'index. Le hook renvoie les résultats, l'état de chargement et une fonction setQuery.
- 3
Étape 3
Afficher les résultats
Parcourez les résultats et affichez-les dans votre propre UI. Aucun composant wrapper obligatoire — liberté totale de style.
Exemple minimal de useSearch
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>
)
}Questions fréquentes
Lancez le Search OS en une soirée
Créez un index, ajoutez des documents et connectez la recherche depuis votre app. Le plan gratuit couvre un prototype — les données persistent lors du passage au plan payant.