Composition of the Search Component

Break down the components of Algolia's InstantSearch in this lesson and understand what the search functionality is composed of.

We'll cover the following

Overview

In this lesson, we will be talking about the InstantSearch component, which is the root component of our search functionality implementation. It allows communication between the frontend application and Algolia. In addition, it offers all children components a way to interact with the searchState.

InstantSearch

To implement search functionality on the frontend, we would first need to import the root container of the search, which is the InstantSearch component.

In order for search functionality to work, the InstantSearch component requires a certain configuration so that it can connect with the Algolia service.

InstantSearch props

The main index is required for search. We are storing its value in indexName at line 22.

We also need a search client that is required to connect with the Algolia service. Look at line 23. searchClient is providing the search client to our component.

Get hands-on with 1400+ tech skills courses.