Extending Algolia's Widgets
Discover what you can do with Algolia's connectors by extending Algolia's InstantSearch components.
We'll cover the following
Overview
In this lesson, we will look into extending Aloglia’s InstantSearch
components using the second API layer which will give us the same functionality but allow us to customise how the DOM should be rendered.
To do that, we are going to create a new search component different from the one we built in the previous chapters to demonstrate how we can extend Algolia’s components.
By default, Aloglia’s InstantSearch
components are comprised of the following two parts:
- Business logic code
- Rendering code
The business logic, in this case, are the connectors that are implemented with higher order component (HOC).
HOC is a function that takes a component and returns a new component.
Connectors
are the API implementation that we will use to extend components. They allow us to extend the existing component however we want.
Additionally, there is a mapping between a component and a connector, which means each component has a connector and vice versa. Every time we want to extend a component, we will need to use a connector.
The rendering code is the component that we pass to the connector as an argument, which will return to us the extended component.
Get hands-on with 1400+ tech skills courses.