Algolia
Algolia components
The Algolia integration now installs components that map to Algolia React components from react-instantsearch-hooks-web SDK, allowing business users to compose search experiences in Canvas to build custom search experiences. These components will need to be added as React components in your application as well.
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:
| Field | Description |
|---|---|
| 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. |
| Title parameter | When Uniform shows users a visual representation of a composition, it shows the slots in the composition and the components in each slot. This setting identifies a parameter whose value displays along with the name of the component. This is useful when a slot has a number of components of the same type. This screenshot shows a component named "Landing Page" with a slot named "Events." Within that slot are 3 "Event" components. The title property value for each event component is displayed next to the component name.  |
| Composition component | If this is ticked, the component can be used to create a composition. |
Learn more about configuring components.