AACsearch para React

Añade búsqueda instantánea tolerante a errores a tu aplicación React. Hooks, widgets y SDKs incluidos.

AACsearch para React

Componentes y hooks de React para construir interfaces de búsqueda potentes y personalizables.

SDK de React

Instala el paquete React de AACsearch. Hooks para búsqueda, autocompletado y facetas. Tipos TypeScript completos, sin dependencias entre iguales.

Hooks de búsqueda

useSearch, useFacets, usePagination y más. Construye interfaces personalizadas con lógica de estado gestionada.

Componentes listos

SearchBox, Hits, Facets, Pagination, Highlight. Personalización completa vía className y render props.

SSR e hidratación

Obtén previamente los resultados de búsqueda en el servidor e hidrata en el cliente sin un destello de contenido vacío.

Soporte completo de TypeScript

Los tipos del SDK se generan a partir de la especificación OpenAPI de AACsearch. Autocompletado para cada campo en el esquema de tu colección.

Seguimiento de eventos

El SDK incluye una llamada trackEvent para clics en resultados, uso de filtros e informes de resultados cero. Alimenta tu panel de AACsearch.

Añade búsqueda a tu app React en 3 pasos

Compatible con React 17, 18 y 19. Agnóstico al framework — Next.js, Remix, Vite y CRA son compatibles.

  1. 1

    Paso 1

    Instala el paquete

    Ejecuta npm install @aacsearch/react en tu proyecto.

  2. 2

    Paso 2

    Usa el hook useSearch

    Pasa tu clave API y el slug del índice. El hook devuelve resultados, estado de carga y una función setQuery.

  3. 3

    Paso 3

    Renderiza los resultados

    Itera sobre los resultados y muéstralos en tu propia UI. Sin componentes envolventes obligatorios — total libertad de estilos.

Ver la referencia de la API

Ejemplo mínimo de useSearch

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

Preguntas frecuentes

Lanza el Search OS en una tarde

Crea un índice, añade documentos y conecta la búsqueda desde tu app. El plan gratuito cubre un prototipo — los datos se mantienen al actualizar.

Empezar gratisAbrir documentación