Skip to main content
React InstantSearch provides a set of components and hooks to build search experiences with Algolia.

Core Components

The main components for setting up InstantSearch:

InstantSearch

Root component that manages the search state

Index

Target a specific index for multi-index search

Configure

Configure search parameters

DynamicWidgets

Automatically render widgets based on index configuration

Hooks

React InstantSearch provides hooks for building custom search UI:

React Hooks

Build custom search components with React hooks

Installation

npm install react-instantsearch

Basic Usage

import { InstantSearch, SearchBox, Hits } from 'react-instantsearch';
import { liteClient as algoliasearch } from 'algoliasearch/lite';

const searchClient = algoliasearch('YourApplicationID', 'YourSearchOnlyAPIKey');

function App() {
  return (
    <InstantSearch searchClient={searchClient} indexName="products">
      <SearchBox />
      <Hits />
    </InstantSearch>
  );
}

Learn More

Build docs developers (and LLMs) love