API Reference / React InstantSearch Hooks

React InstantSearch Hooks

React InstantSearch Hooks is an open-source, UI library for React that lets you quickly build a search interface in your front-end application.

To get started, install React InstantSearch Hooks and its dependencies.

1
2
3
yarn add algoliasearch react-instantsearch-hooks-web
# or
npm install algoliasearch react-instantsearch-hooks-web

Then, import the library in your React application.

1
2
3
4
5
6
7
8
9
10
11
12
import algoliasearch from 'algoliasearch/lite';
import { InstantSearch } from 'react-instantsearch-hooks-web';

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

function App() {
  return (
    <InstantSearch searchClient={searchClient} indexName="YourIndexName">
      {/* ... */}
    </InstantSearch>
  );
}

You're ready to use React InstantSearch Hooks. Check out all available widgets and Hooks below.

Basics

<InstantSearch>

The root provider component of all widgets and Hooks.

useInstantSearch()

React Hook to access the InstantSearch API.

<Index>

The provider component for an Algolia index.

<SearchBox>

A widget to display a search box.

<Configure>

A widget to forward search parameters to Algolia.

useAutocomplete()

React Hook to use an autocomplete connector.

useVoiceSearch()

React Hook to use a voice search connector.

insights

A middleware to help set the userToken for insights purposes, and send events from built-in and custom widgets.

useConnector()

React Hook to use an InstantSearch connector.

Results

<Hits>

A widget to display a list of results.

<InfiniteHits>

A widget to display an infinite list of results.

<Highlight>

A widget to display highlighted attributes of a search result.

<Snippet>

A widget to display snippeted attributes of a search result.

Refinements

<RefinementList>

A widget to display multi-select facets.

<DynamicWidgets>

A widget to conditionally render other widgets based on the index settings.

<HierarchicalMenu>

A widget to create a navigation based on a hierarchy of facet attributes. It’s commonly used for categories with subcategories.

useRangeSlider()

React Hook to use a range slider connector.

<Menu>

A widget to display a menu to let users choose a single value.

<CurrentRefinements>

A widget to display the list of active refinements in the search.

<RangeInput>

A widget to select a numerical range using minimum and maximum inputs.

<MenuSelect>

A widget to use a menu select connector.

<ToggleRefinement>

A widget to provide an on/off filter.

useNumericMenu()

React Hook that shows a list of numeric filters that are pre-configured when creating the widget.

useRatingMenu()

React Hook to use a rating menu connector.

<ClearRefinements>

A widget to reset the active refinements of the search.

Pagination

<Pagination>

A widget to display a pagination to browse pages.

<HitsPerPage>

A widget to display a menu of options to change the number of results per page.

Metadata

<Breadcrumb>

A widget to display navigation links to see where the current page is in relation to the facet’s hierarchy.

useStats()

React Hook to use a stats connector.

<PoweredBy>

A widget to display the Algolia logo to redirect to the Algolia website.

useQueryRules()

React Hook to set custom Rule contexts and display custom data from Rules.

Sorting

<SortBy>

A widget to sort by specified indices.

useRelevantSort()

React Hook to use a relevant sort connector.

Geo Search

useGeoSearch()

React Hook to use a geo search connector.

Routing

simple

A state mapping used by default with routing.

history

A router used by default with routing.

uiState

An object that represents the state of the search.

Server

<InstantSearchSSRProvider>

The provider component that forwards the server state to <InstantSearch>.

getServerState()

The function that retrieves the server state to pass to <InstantSearchSSRProvider>.

Did you find this page helpful?