UI libraries / React InstantSearch

React InstantSearch

This is the React InstantSearch v7 documentation. React InstantSearch v7 is the latest version of React InstantSearch and the stable version of React InstantSearch Hooks.

If you were using React InstantSearch v6, you can upgrade to v7.

If you were using React InstantSearch Hooks, you can still use the React InstantSearch v7 documentation, but you should check the upgrade guide for necessary changes.

If you want to keep using React InstantSearch v6, you can find the archived documentation.

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

To get started, install React InstantSearch and its dependencies.

Copy

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

Then, import the library in your React application.

Copy
import algoliasearch from 'algoliasearch/lite';
import { InstantSearch } from 'react-instantsearch';

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

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

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

Guides Building Search UI

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.
useConfigureRelatedItems()	React Hook to use a configure related items connector.
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.
middleware	With the middleware API, you can inject functionality into InstantSearch.js.
renderState	The `renderState` provides access to all the data to render the widgets, including the methods to refine the search.
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 that displays attributes in your search results in a shorter form (a snippet).

Refinements

<RefinementList>	A widget to display multi-select facets.
<ColorRefinementList>	A widget that filters results based on color facet values. It helps the user quickly visualize the kind of color that products have.
<DynamicWidgets>	A widget to conditionally render other widgets based on the index settings.
<HierarchicalMenu>	A widget to create a navigation menu based on a hierarchy of facet attributes. It’s commonly used for categories with subcategories.
useRange()	React Hook to filter search results within a numeric range.
<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.
<Stats>	A widget that displays the total number of matching hits and the time it took to get them (time spent in the Algolia server).
<PoweredBy>	A widget to display the Algolia logo to redirect to the Algolia website.
StateResults	A widget for accessing the state and results of InstantSearch.
<QueryRulesCustomData>	A widget to display custom data from rules.
<QueryRuleContext>	A widget to set Rule contexts without rendering anything.
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.
createInstantSearchRouterNext()	The function that creates a Next.js-compatible InstantSearch router to pass to routing.

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?