Search⌘ K
AI Features

Implementing a Highlight Component

Explore how to implement the Highlight component from Algolia's React InstantSearch library to improve your search results display. Learn to wrap specific attributes for highlighting, customize HTML tags, and enhance user interaction by clearly showing query matches within your search UI.

We'll cover the following...

Overview

In the previous lesson, we added some functionality to our search component by adding the SearchBox and the Hits component that allows us to make a query request to the Algolia server and display results from this query.

In this lesson, we will learn how to improve the user search experience by adding a highlight feature that can show a user the highlighted attribute based on the searched query.

The Highlight component

In order to ...