API Reference / React InstantSearch

React InstantSearch

We released React InstantSearch Hooks, a new InstantSearch library for React. We recommend using React InstantSearch Hooks in new projects or upgrading from React InstantSearch.

Before building your UI, don't forget to install the library.

Basics

InstantSearch	The root component of all React InstantSearch implementations. It provides all the connected components (or widgets) a means to interact with the `searchState`.
Index	This widget lets you apply widgets to a specific Algolia index. It’s useful when you want to build a federated search interface.
SearchBox	A widget to let the user perform a text-based query.
Configure	A widget that lets you provide raw search parameters to the Algolia API.
ConfigureRelatedItems	The widget computes search parameters to create related items experiences without rendering anything.
Panel	A widget that wraps other widgets in a consistent panel design. It also reacts when the widget no longer can refine.
Autocomplete	A connector that provides the logic to create a connected component that renders results from Algolia.
VoiceSearch	A widget to let the user perform a voice-based query.

Hits	A widget to display a list of results.
InfiniteHits	A widget to display an infinite list of results with a “Load more” button.
Highlight	A widget that displays highlighted attributes of your search results.
Snippet	A widget that displays attributes as snippets of your search results.

RefinementList	One of the most common widget that you can find in a search UI. With this widget, the user can filter the dataset based on facets.
DynamicWidgets	Widget to conditionally render other widgets based on the facet merchandising settings of the index.
HierarchicalMenu	A widget to create a navigation based on a hierarchy of facet attributes. It is commonly used for categories with subcategories.
RangeSlider	Since a lot of sliders already exist, we didn’t include one by default. However, you can easily connect React InstantSearch to an existing one using the `connectRange` connector.
Menu	A widget that displays a menu that lets the user choose a single value for a specific attribute.
CurrentRefinements	A widget that displays the list of currently applied refinements.
RangeInput	A widget that allows a user to select a numeric range using a minimum and maximum input.
MenuSelect	A widget that displays a select element that lets the user choose a single value for a specific attribute.
ToggleRefinement	A widget that provides an on/off filtering feature based on an attribute value.
NumericMenu	A widget that displays a list of numeric filters in a list. Those numeric filters are pre-configured with creating the widget.
RatingMenu	A widget that lets the user refine search results by clicking on stars.
ClearRefinements	A widget that displays a button that lets the user clear every currently applied refinement.

Pagination	A widget that displays a pagination system allowing the user to change the current page.
HitsPerPage	A widget that displays a select element to let the user change the number of displayed hits.
ScrollTo	A widget to make the page scroll to the component wrapped by it when the `searchState` is updated.

Breadcrumb	A secondary navigation scheme that lets the user 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 our website.
StateResults	A widget that provides a way to access the `searchState` and the `searchResults` of InstantSearch.
QueryRuleCustomData	A widget to display custom data from Rules.
QueryRuleContext	A widget to set Rule contexts without rendering anything.

SortBy	A widget that displays a list of indices, allowing a user to change the way hits are sorting (with replica indices).
RelevantSort	A widget that displays the current search mode when searching in a virtual replica index, and allows users to switch between Relevant and regular sorting, which is more exhaustive and can return less relevant results.

geoSearch	A widget that displays search results on a Google Map.
Marker	A widget that wraps `google.maps.Marker`, all the options available on the Marker can be provided as props.
CustomMarker	An alternative to `<Marker />` when you may want to have the full control of the marker rendering.
Control	A widget that allows the user to control the different strategies for the refinement (enable/disable refine on map move).
Redo	A widget that displays a button to redo the search on the current map view when the refined on map move option is disabled.
GoogleMapLoader	A widget that provides a built-in solution to load the Google Maps library in your application.

An object that represents the state of the search.

Did you find this page helpful?