React InstantSearch Widgets
To see the widgets in action, check out our interactive widget showcase.
Basics
InstantSearch |
The root component of all React InstantSearch implementations. It provides all the connected components (or widgets) a means to interact with the |
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. |
Results
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 snippeted attributes of your search results. |
Answers |
A widget to fetch and display the result that answers users’ question via semantic search. |
Refinements
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. |
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 |
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
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 |
Metadata
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 |
QueryRuleCustomData |
A widget to display custom data from Rules. |
QueryRuleContext |
A widget to set Rule contexts without rendering anything. |
Sorting
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. |
Geo Search
GeoSearch |
A widget that displays search results on a Google Maps map. |
Marker |
A widget that wraps |
CustomMarker |
An alternative to |
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. |
Routing
searchState |
An object that represents the state of the search. |