search-ui-react.md

Home > @yext/search-ui-react

search-ui-react package

Functions

Function	Description
AlternativeVerticals({ currentVerticalLabel, verticalConfigMap, displayAllOnNoResults, customCssClasses }, input)	A component that displays the alternative verticals that have results if a search returns none on the current vertical.
AnalyticsProvider(props)	A higher-order component which provides analytics for its children.
AppliedFilters(props)	A component that displays a list of filters applied to the current vertical search, which may include any selected options from facets, NLP filters, and field value static filters.
ApplyFiltersButton({ customCssClasses, label }, input)	Runs a vertical search. By default has position: sticky styling that anchors it to the bottom of the page.
DirectAnswer({ customCssClasses, UnknownFieldTypeDisplay }, input)	Renders Direct Answers provided by the Search API.
DropdownItem(_props)	A wrapper component for specifying a DropdownItemWithIndex. The index will be automatically provided by the Dropdown component instance.
executeAutocomplete(searchActions)	Executes a universal/vertical autocomplete search and return the corresponding response.
executeGenerativeDirectAnswer(searchActions)	Executes a generative direct answer and return the corresponding response.
executeSearch(searchActions)	Executes a universal/vertical search.
Facets(props)	A component that displays all facets applicable to the current vertical search.
FilterDivider({ className }, input)	A divider component used to separate NumericalFacets, HierarchicalFacets, StandardFacets, and StaticFilters.
FilterSearch({ searchFields, label, placeholder, searchOnSelect, onSelect, onDropdownInputChange, afterDropdownInputFocus, sectioned, customCssClasses, disableBuiltInClasses, ariaLabel, resultsRegionAriaLabel, showCurrentLocationButton, geolocationProps }, input)	A component which allows a user to search for filters associated with specific entities and fields.
GenerativeDirectAnswer({ customCssClasses, answerHeader, citationsHeader, CitationCard, CitationsContainer, }, input)	Displays the AI generated answer of a generative direct answer.
Geolocation_2({ geolocationOptions, radius, label, GeolocationIcon, handleClick, customCssClasses, useIconAsButton, disableBuiltInClasses }, input)	A React Component which collects location information to create a location filter and perform a new search.
getSearchIntents(searchActions)	Get search intents of the current query stored in headless using autocomplete request.
getUserLocation(geolocationOptions)	Retrieves user's location using navigator.geolocation API.
HierarchicalFacet(props)	A component that displays a single hierarchical facet, in a tree level structure, applicable to the current vertical search. Use this to override the default rendering.
HierarchicalFacets({ searchOnChange, collapsible, defaultExpanded, includedFieldIds, customCssClasses, delimiter, showMoreLimit }, input)	A component that displays hierarchical facets, in a tree level structure, applicable to the current vertical search.
isCtaData(data)	Type guard for CtaData.
LocationBias({ geolocationOptions, customCssClasses }, input)	A React Component which displays and collects location information in order to bias searches.
MapboxMap({ mapboxAccessToken, mapboxOptions, PinComponent, renderPin, getCoordinate, onDrag, iframeWindow, allowUpdates, onPinClick, markerOptionsOverride, }, input)	A component that renders a map with markers to show result locations using Mapbox GL.
NumericalFacet(props)	A component that displays a single numerical facet. Use this to override the default rendering.
NumericalFacets({ searchOnChange, includedFieldIds, getFilterDisplayName, inputPrefix, customCssClasses, ...filterGroupProps }, input)	A component that displays numerical facets applicable to the current vertical search.
Pagination(props)	Renders a component that divide a series of vertical results into chunks across multiple pages and enable user to navigate between those pages.
renderHighlightedValue(highlightedValueOrString, customCssClasses)	Renders a HighlightedValue with highlighting based on its matchedSubstrings.
ResultsCount({ customCssClasses }, input)	Renders results count of a universal/vertical search.
SearchBar({ placeholder, geolocationOptions, hideRecentSearches, visualAutocompleteConfig, showVerticalLinks, onSelectVerticalLink, verticalKeyToLabel, recentSearchesLimit, universalAutocompleteLimit, verticalAutocompleteLimits, customCssClasses, onSearch, autocompleteDisabled }, input)	Renders a SearchBar that is hooked up with an InputDropdown component.
SearchI18nextProvider(props)	A higher-order component which provides translations for search react components.
SpellCheck({ customCssClasses, onClick }, input)	Renders a suggested query if the Search API provides one.
StandardCard(props)	This Component renders the base result card.
StandardFacet(props)	A component that displays a single standard facet. Use this to override the default rendering.
StandardFacets(props)	A component that displays simple facets applicable to the current vertical search.
StandardSection(props)	A component that displays all the results for a vertical using a standard section template.
StaticFilters(props)	A component that displays a group of user-configured field value filters that will be applied to the current vertical search.
ThumbsFeedback(props)	Renders a quality feedback widget composed of thumbs up and thumbs down buttons.
UniversalResults({ verticalConfigMap, showAppliedFilters, customCssClasses }, input)	Displays the results of a universal search with the results for each vertical separated into sections.
updateLocationIfNeeded(searchActions, intents, geolocationOptions)	If the provided search intents include a 'NEAR_ME' intent and there's no existing user's location in state, retrieve and store user's location in headless state.
useAnalytics()	Returns a service that can be used to report analytics events.
useCardAnalyticsCallback(result, analyticsType)	Creates a memoized function for reporting card analytics.
useCardFeedbackCallback(result)	Creates a memoized function for reporting card feedback analytics.
useComposedCssClasses(builtInClasses, customClasses, disableBuiltInClasses)	useComposedCssClasses merges a component's built-in tailwind classes with custom tailwind classes.
VerticalResults(props)	A component that renders search results for a vertical page.

Interfaces

Interface	Description
AfterDropdownInputFocusProps	The parameters that are passed into FilterSearchProps.afterDropdownInputFocus.
AlternativeVerticalsCssClasses	The CSS class interface used for AlternativeVerticals().
AlternativeVerticalsProps	Props for AlternativeVerticals().
AppliedFiltersCssClasses	The CSS class interface used for AppliedFilters().
AppliedFiltersProps	Properties for AppliedFilters().
ApplyFiltersButtonCssClasses	The CSS class interface for ApplyFiltersButtonProps.
ApplyFiltersButtonProps	Props for ApplyFiltersButton()
AutocompleteResultCssClasses	The CSS class interface for the Autocomplete Result.
CardProps	The props provided to every CardComponent.
CitationProps	Props for citation card.
CitationsProps	Props for citations component.
Coordinate	Coordinate use to represent the result's location on a map.
CtaData	The shape of a StandardCard CTA field's data.
DirectAnswerCssClasses	The CSS class interface for DirectAnswer().
DirectAnswerProps	Props for DirectAnswer().
FacetsCssClasses	The CSS class interface for Facets(). Any FilterGroupCssClasses props will be overridden by the same props from customCssClasses on StandardFacetProps, NumericalFacetProps, or HierarchicalFacetProps.
FacetsProps	Props for the Facets() component.
FilterGroupCssClasses	The CSS class interface for FilterGroup.
FilterGroupProps	Props for the FilterGroup component.
FilterOptionConfig	The configuration data for a field value filter option.
FilterSearchCssClasses	The CSS class interface for FilterSearch().
FilterSearchProps	The props for the FilterSearch() component.
GdaClickEventData	Payload for click events fired on a generative direct answer card.
GenerativeDirectAnswerCssClasses	The CSS class interface used for GenerativeDirectAnswer().
GenerativeDirectAnswerProps	Props for GenerativeDirectAnswer().
GeolocationCssClasses	The CSS class interface for the Geolocation component.
GeolocationProps	The props for the Geolocation component.
HierarchicalFacetDisplayCssClasses	The CSS class interface for HierarchicalFacetDisplay.
HierarchicalFacetProps	Props for the StandardFacet() component.
HierarchicalFacetsCssClasses	The CSS class interface for HierarchicalFacets().
HierarchicalFacetsProps	Props for the HierarchicalFacets() component.
HighlightedValueCssClasses	The CSS class interface for renderHighlightedValue().
LocationBiasCssClasses	The CSS class interface for the LocationBias() component.
LocationBiasProps	The props for the LocationBias() component.
MapBounds	A library-owned map bounds interface for drag and zoom callbacks.
MapboxMapOptions	The subset of map configuration supported by this component.
MapboxMapProps	Props for the MapboxMap() component. The type param "T" represents the type of "rawData" field of the results use in the map.
MapCenter	A map center coordinate with helper methods that are owned by this library.
MapFitBoundsOptions	Options used when fitting the map view to a set of bounds.
MapInstance	A library-owned facade over the backing map implementation.
MapMarkerOptions	Marker options supported by this component.
MapPadding	Padding around a fit-bounds request.
NumericalFacetProps	Props for the StandardFacet() component.
NumericalFacetsCssClasses	The CSS class interface for NumericalFacets().
NumericalFacetsProps	Props for the NumericalFacets() component.
OnDropdownInputChangeProps	The parameters that are passed into FilterSearchProps.onDropdownInputChange.
OnSelectParams	The parameters that are passed into FilterSearchProps.onSelect.
PaginationCssClasses	The CSS classes used for pagination.
PaginationProps	Props for Pagination() component
RangeInputCssClasses	The CSS class interface for RangeInput.
ResultsCountCssClasses	The CSS class interface for ResultsCount().
ResultsCountProps	Props for ResultsCount().
SearchAnalyticsConfig	An interface representing the configuration for search analytics reporting.
SearchAnalyticsEventService	A service for reporting Yext Search analytics events
SearchBarCssClasses	The CSS class interface for the SearchBar().
SearchBarProps	The props for the SearchBar() component.
SectionHeaderCssClasses	The CSS class interface used for the SectionHeader component.
SectionProps	The configuration of a section template for a vertical's results on a universal page.
SpellCheckCssClasses	The CSS Class interface for SpellCheck.
SpellCheckProps	The props for the SpellCheck() component.
StandardCardCssClasses	The CSS class interface used for the StandardCardDisplay.
StandardCardData	The data used by the StandardCard() and taken from the original Result.
StandardCardProps	Props for a StandardCard.
StandardFacetProps	Props for the StandardFacet() component.
StandardFacetsCssClasses	The CSS class interface for StandardFacets().
StandardFacetsProps	Props for the StandardFacets() component.
StandardSectionCssClasses	The CSS class interface used for StandardSection().
StandardSectionProps	The configuration for a StandardSection.
StaticFiltersCssClasses	The CSS class interface for StaticFilters().
StaticFiltersProps	Props for the StaticFilters() component.
ThumbsFeedbackCssClasses	The CSS class interface used for ThumbsFeedback().
ThumbsFeedbackProps	Props for ThumbsFeedback().
UniversalResultsCssClasses	The CSS class interface used for UniversalResults().
UniversalResultsProps	Props for UniversalResults().
UnknownFieldTypeDisplayProps	Props for UnknownFieldTypeDisplayComponent.
VerticalConfig	The configuration for a vertical.
VerticalLabelMap	A map of vertical keys to labels.
VerticalLink	Data needed to create a URL to a vertical search page.
VerticalResultsCssClasses	The CSS class interface used for VerticalResults().
VerticalResultsProps	Props for the VerticalResults component.
VisualAutocompleteConfig	The configuration options for Visual Autocomplete.

Variables

Variable	Description
ComponentsContentPath	Content path to the source files in component library that utilizes Tailwind class names. This is intended to be used in user's custom tailwind config.

Type Aliases

Type Alias	Description
CardAnalyticsDataType	The data types use to construct the payload in the analytics event.
CardAnalyticsType	Analytics event types for interactions on a card.
CardComponent	A functional component that can be used to render a result card.
CardCtaEventType	Analytics event types for cta click, title click, and citation click.
CoordinateGetter	A function use to derive a result's coordinate.
DefaultRawDataType	The default type for "rawData" field of type Result.
DropdownItemProps	Props for the DropdownItem().
FacetProps	Props for a single facet component.
FeedbackType	Analytics event types for quality feedback.
FocusedItemData	The data associated with the currently focused item.
OnDragHandler	A function which is called when the user changes the map viewport.
onSearchFunc	The interface of a function which is called on a search.
PinComponent	A functional component that can be used to render a custom marker on the map.
PinComponentProps	Props for rendering a custom marker on the map.
RenderEntityPreviews	The type of a functional React component which renders entity previews using a map of vertical key to the corresponding VerticalResults data.
SearchTranslationOverrides	SearchI18next translation overrides The key is the locale to override. The value is the translation object that define specific translations override.
SectionComponent	A component that can be used to render a section template for vertical results.
StaticFilterOptionConfig	The configuration data for a field value static filter option.
UnknownFieldTypeDisplayComponent	A React component interface to render results with "unknown" field type in field value direct answer.
VerticalConfigMap	A map of verticalKey to a VerticalConfig.