Skip to main content
React InstantSearch provides hooks that let you build custom search components with full control over the rendering.

​
Core Hooks

useInstantSearch

Access the InstantSearch instance and search state

useSearchBox

Build a custom search box

useHits

Access search results

useInfiniteHits

Build infinite scroll for results

useRefinementList

Build custom refinement lists

useMenu

Build custom menu navigation

usePagination

Build custom pagination

​
Installation

npm install react-instantsearch

​
Basic Usage

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

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

function CustomSearchBox() {
  const { query, refine } = useSearchBox();

  return (
    <input
      type="search"
      value={query}
      onChange={(e) => refine(e.target.value)}
      placeholder="Search..."
    />
  );
}

function CustomHits() {
  const { items } = useHits();

  return (
    <div>
      {items.map((item) => (
        <div key={item.objectID}>
          <h3>{item.name}</h3>
          <p>{item.description}</p>
        </div>
      ))}
    </div>
  );
}

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

​
Why Use Hooks?

Hooks give you full control over your search UI:
  • Custom Rendering: Build components that match your design system
  • Direct Access: Get direct access to search state and functions
  • Composability: Combine multiple hooks in a single component
  • TypeScript Support: Full type safety for your search UI

​
Available Hooks

​
State Management

  • useInstantSearch: Access the InstantSearch instance, UI state, and global search state
  • useSearchBox: Build custom search inputs with query management

​
Results

  • useHits: Display paginated search results
  • useInfiniteHits: Build infinite scroll results

​
Refinements

  • useRefinementList: Multi-select faceted filters
  • useMenu: Single-select faceted navigation
  • useToggleRefinement: Boolean filters
  • useNumericMenu: Numeric range filters
  • useRangeInput: Custom range inputs
  • useRangeSlider: Range slider filters
  • usePagination: Page-based navigation
  • useBreadcrumb: Hierarchical navigation breadcrumbs
  • useHierarchicalMenu: Hierarchical menu navigation

​
Sorting & Configuration

  • useSortBy: Index sorting
  • useConfigure: Dynamic search parameter configuration

​
Metadata

  • useStats: Search statistics
  • useCurrentRefinements: Active filters

​
TypeScript Support

All hooks support TypeScript with generic type parameters: 
import { useHits } from 'react-instantsearch';

interface Product {
  objectID: string;
  name: string;
  price: number;
  image: string;
}

function ProductHits() {
  const { items } = useHits<Product>();

  return (
    <div>
      {items.map((item) => (
        <div key={item.objectID}>
          <img src={item.image} alt={item.name} />
          <h3>{item.name}</h3>
          <p>${item.price}</p>
        </div>
      ))}
    </div>
  );
}

​
Learn More