AACsearch для React

Добавьте мгновенный поиск с устойчивостью к опечаткам в ваше React-приложение. Хуки, виджеты и SDK включены.

Поиск для React-приложений

SDK браузера AACsearch экспортирует React-хуки и компоненты. Добавьте поиск за несколько минут.

React SDK

Установите пакет AACsearch React. Хуки для поиска, автодополнения и фасетов. Полные типы TypeScript, нулевые peer-зависимости.

Хуки поиска

useSearch, useFacets и useInfiniteResults позволяют создавать пользовательские поисковые интерфейсы с минимальным управлением состоянием.

Готовые компоненты

SearchBox, FacetList и ResultCard — готовые компоненты для распространённых паттернов поискового UI.

SSR и гидратация

Предварительно загружайте результаты поиска на сервере и гидратируйте на клиенте без мерцания пустого контента.

Поддержка TypeScript

Все хуки и компоненты полностью типизированы. Ошибки пропсов перехватываются во время сборки.

Отслеживание событий

SDK включает вызов trackEvent для кликов по результатам, использования фильтров и отчётности о нулевых результатах. Наполняет дашборд AACsearch.

Добавьте поиск в React-приложение за 3 шага

Работает с React 17, 18 и 19. Не зависит от фреймворка — поддерживаются Next.js, Remix, Vite и CRA.

  1. 1

    Шаг 1

    Установите пакет

    Выполните npm install @aacsearch/react в вашем проекте.

  2. 2

    Шаг 2

    Используйте хук useSearch

    Передайте ваш API-ключ и slug индекса. Хук возвращает результаты, состояние загрузки и функцию setQuery.

  3. 3

    Шаг 3

    Отобразите результаты

    Переберите результаты и отобразите их в своём UI. Никаких обязательных компонентов-обёрток — полная свобода стилизации.

Справочник API

Минимальный пример 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>
  )
}

Часто задаваемые вопросы

Запустите Search OS за один вечер

Создайте индекс, добавьте документы и подключите поиск из приложения. Бесплатного тарифа достаточно для прототипа.

Начать бесплатноОткрыть документацию