UI libraries / React InstantSearch

React InstantSearch

Before building your UI, install InstantSearch. For more information, see What is InstantSearch?

All the available widgets and Hooks are listed below.

Basics

<InstantSearch>	The root wrapper component for 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.
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.

<Hits>	A widget to display a list of search results.
<InfiniteHits>	A widget to display an infinite list of results.
<Highlight>	Highlighting visually emphasizes matching terms in your search results to help them stand out.
<Snippet>	A widget that displays attributes in your search results in a shorter form (a snippet).

<FrequentlyBoughtTogether>	A widget to display a list of frequently bought together items.
<RelatedProducts>	A widget to display a list of related products and related content.
<TrendingItems>	A widget to display a list of trending items.
<TrendingFacets>	A widget to display a list of Trending Facets.
<LookingSimilar>	A widget to display a list of visually similar products.

<RefinementList>	A widget to display multi-select facets.
<ColorRefinementList>	A widget that filters results based on color facet values. It helps users quickly visualize the kind of color that products have.
<DynamicWidgets>	A widget to conditionally render other widgets based on the index settings.
<HierarchicalMenu>	Widget that displays a hierarchical menu.
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>	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.

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

<SortBy>	A widget to sort by specified indices.
useRelevantSort()	React Hook to use a relevant sort connector.

A React Hook that displays search results on a Google Map.

simple	A state mapping used by default with routing.
history	A router used by default with routing.
uiState	An object that represents a search UI state.
createInstantSearchRouterNext()	The function that creates a Next.js-compatible InstantSearch router to pass to routing.

<InstantSearchSSRProvider>	The provider component that forwards the server state to `<InstantSearch>`.
getServerState()	The function that retrieves the server state to pass to `<InstantSearchSSRProvider>`.
<InstantSearchNext>	The component that replaces `<InstantSearch>` in Next.js App Router applications.

Did you find this page helpful?