The Algolia integration now installs components that map to Algolia React components from react-instantsearch-hooks-web SDK, allowing business users to compose custom search experiences in Canvas. These components need to be added as React components in your application as well. Review this example repository that shows how the components are connected.
After the integration install, look out for these components in your library:
- Algolia Demo Page: This is a composition component that contains all the components available through the Algolia integration. It represents a web page experience.
- Basic Components: has parameters for search box, refinement list, hits, and pagination
- Hit and Hits: show search results returned
- Index: allows searching multiple indices
- InstantSearch: this component connects your InstantSearch app to your Algolia application
- Pagination: allows users to navigate through all the returned hits
- Refinement List: filters search results by specific criteria (size, color, etc.)
- Search Box: the main UI component of the search experience
Configure the components#
From the component library you can manage these attributes of each component:
|Component name||Name that describes the component or its purpose.|
|Public ID||Name that uniquely identifies the component. This value is available to developers, but can't be changed once set.|
|Component icon||The icon is displayed next to the component within Uniform. This helps users immediately identify components.|
|Composition component||If this is ticked, the component can be used to create a composition.|
Learn more about configuring components.