search-ui-react.renderentitypreviews.md

Home > @yext/search-ui-react > RenderEntityPreviews

RenderEntityPreviews type

The type of a functional React component which renders entity previews using a map of vertical key to the corresponding VerticalResults data.

Signature:

export declare type RenderEntityPreviews = (autocompleteLoading: boolean, verticalKeyToResults: Record<string, VerticalResultsData>, dropdownItemProps: {
    onClick: (value: string, _index: number, itemData?: FocusedItemData) => void;
    ariaLabel: (value: string) => string;
}) => JSX.Element | null;

References: FocusedItemData

Remarks

The autocomplete loading state is passed in as an optional param.

Default props for rendering corresponding DropdownItems are passed in: an onClick function to allow an entity preview to be submitted, and an ariaLabel function that returns text for the screenreader

For the entity previews to be navigable in the search bar's dropdown section, wrap each entity preview in a DropdownItem() component.