React InstantSearch Widgets

The root component of all React InstantSearch implementations. It provides all the connected components (or widgets) a means to interact with the searchState.

The component that allows you to apply widgets to a dedicated index. It’s useful if you want to build an interface that targets multiple indices.

A widget to let the user perform a text-based query.

A widget that lets you provide raw search parameters to the Algolia API.

A widget that wraps other widgets in a consistent panel design. It also reacts when the widget no longer can refine.

A connector that provides the logic to create a connected component that renders results from Algolia.

A widget to let the user perform a voice-based query.

A widget to display a list of results.

A widget to display an infinite list of results with a “Load more” button.

A widget that displays highlighted attributes of your search results.

A widget that displays snippeted attributes of your search results.

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.

A widget to create a navigation based on a hierarchy of facet attributes. It is commonly used for categories with subcategories.

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.

A widget that displays a menu that lets the user choose a single value for a specific attribute.

A widget that displays the list of currently applied refinements.

A widget that allows a user to select a numeric range using a minimum and maximum input.

A widget that displays a select element that lets the user choose a single value for a specific attribute.

A widget that provides an on/off filtering feature based on an attribute value.

A widget that displays a list of numeric filters in a list. Those numeric filters are pre-configured with creating the widget.

A widget that lets the user refine search results by clicking on stars.

A widget that displays a button that lets the user clear every currently applied refinement.

A widget that displays a pagination system allowing the user to change the current page.

A widget that displays a select element to let the user change the number of displayed hits.

A widget to make the page scroll to the component wrapped by it when the searchState is updated.

A secondary navigation scheme that lets the user see where the current page is in relation to the facet’s hierarchy.

A widget that displays the total number of matching hits and the time it took to get them (time spent in the Algolia server).

A widget to display the Algolia logo to redirect to our website.

A widget that provides a way to access the searchState and the searchResults of InstantSearch.

A widget to display custom data from Query Rules.

A widget to set rule contexts without rendering anything.

A widget that displays a list of indices, allowing a user to change the way hits are sorting (with replica indices).

A widget that displays search results on a Google Maps map.

A widget that wraps google.maps.Marker, all the options avaible on the Marker can be provided as props.

An alternative to <Marker /> when you may want to have the full control of the marker rendering.

A widget that allows the user to control the different strategies for the refinement (enable/disable refine on map move).

A widget that displays a button to redo the search on the current map view when the refined on map move option is disabled.

A widget that provides a built-in solution to load the Google Maps library in your application.