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.

Copy

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.

Copy
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.

Guides Building Search UI

Basics

<InstantSearch>	The root provider component of all widgets and Hooks.
<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?