React InstantSearch - Algolia

To get started with React InstantSearch, see What is InstantSearch?

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.
`Autocomplete`	A widget that shows query results as you type in a search box.
`Chat`	A widget to display a chat interface that interacts with a generative AI assistant.
`ChatTrigger`	A widget to display a button that opens the `Chat` widget’s overlay.
`Feeds`	A component to display multiple independent result sets from a multifeed composition.
`useVoiceSearch`	React Hook to use a voice search connector.
`insights`	A middleware to help set the user token for insights purposes, and send events from built-in and custom widgets.
`middleware`	With the middleware API, you can inject logic 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 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).

Recommendations


`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


`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`	A React Hook that displays search results on a Google Map.

Routing


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

Server


`InstantSearchSSRProvider`	The provider component that forwards the server state to `InstantSearch`.
`getServerState`	The function that retrieves the server state to pass to `InstantSearchSSRProvider`.

Last modified on July 29, 2026