UI libraries / 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 userToken for insights purposes, and send events from built-in and custom widgets.

middleware

With the middleware API, you can inject functionality into InstantSearch.js.

renderState

The renderState provides access to all the data to render the widgets, including the methods to refine the search.

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.

Did you find this page helpful?