InstantSearch.js Widgets
To see the widgets in action, check out our interactive widget showcase.
Basics
| instantsearch |
The main component of InstantSearch.js. This object manages the widget and lets you add new ones. |
| searchBox |
A widget to let the user perform a text-based query. |
| configure |
The widget lets you provide raw search parameters to the Algolia API without rendering anything. |
| panel |
A widget that wraps other widgets in a consistent panel design. It also reacts when the widget can no longer 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 a list of results with a “Show more” button. |
| highlight |
A function that returns any attribute from a hit into its highlighted form, when relevant. |
| snippet |
A function that returns any attribute from a hit into its snippeted form, when relevant. |
| geoSearch |
A widget that displays the list of results from the search on a Google Maps map. |
Refinements
| refinementList |
One of the most common widget 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 |
A widget that provides a user-friendly way to filter the results, based on a single numeric range. |
| menu |
A widget that displays a menu that lets the user choose a single value for a specific attribute. |
| currentRefinements |
A widget that displays a list of refinements applied to the search. |
| rangeInput |
A widget that allows a user to select a numeric range using a minimum and maximum input. |
| menuSelect |
A widget that allows a user to select a single value to refine in a dropdown menu. |
| 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 clean every refinement applied to the search. |
Pagination
| pagination |
A widget that displays a pagination system allowing the user to change the current page. |
| hitsPerPage |
A widget that displays a dropdown menu to let the user change the number of displayed hits. |
Metadata
| breadcrumb |
The breadcrumb widget is 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. |
| poweredBy |
A widget to display the Algolia logo to redirect to our website. |
| analytics |
A widget that pushes the current state of the search to the analytics platform of your choice. |
| queryRuleCustomData |
A widget to display custom data from Query 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 sorted (with replica indices). |
