InstantSearch.js
Before building your UI, install InstantSearch. For more information, see What is InstantSearch?
All the available widgets are listed below.
Basics
| instantsearch | The root wrapper component for all widgets. |
| index | This widget lets you apply widgets to a specific Algolia index. |
| searchBox | A widget to let users 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 users perform a voice-based query. |
| insights | A middleware to help set the |
| middleware | With the middleware API, you can inject functionality into InstantSearch.js. |
| renderState | The |
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 | Highlighting visually emphasizes matching terms in your search results to help them stand out. |
| ReverseHighlight | A function that returns any attribute from a hit into its highlighted form, when relevant. |
| Snippet | A function that displays attributes in your search results in a shorter form (a snippet). |
| ReverseSnippet | A function that returns any attribute from a hit into its snippeted form, when relevant. |
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. |
Refinements
| refinementList | One of the most common widgets you can find in a search UI. With this widget, users can filter the dataset based on 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 | Widget to conditionally render other widgets based on the facet merchandising settings of the index. |
| hierarchicalMenu | Widget that displays a hierarchical menu. |
| 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 users 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 users refine search results by clicking on stars. |
| clearRefinements | A widget that displays a button that lets users clean every refinement applied to the search. |
Pagination
| pagination | A widget that displays a pagination system which lets users change the current page of search results. |
| hitsPerPage | A widget that displays a dropdown menu to let users change the number of displayed hits. |
Metadata
| breadcrumb | The breadcrumb widget is a secondary navigation scheme that lets users 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 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. |
| 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 Map. |
Routing
| simple | A state mapping used by default with routing. |
| singleIndex | A state mapping that enables backward compatibility with version 3.x.x. |
| history | A router used by default with routing. |
| uiState | An object that represents a search UI state. |
