InstantSearch.js
Before building your UI, install the library.
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 |
A widget to create a navigation based on a hierarchy of facet attributes. It’s 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 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. |