› › ›

Results

Displays all search results.

Example

import { Results } from "@elastic/react-search-ui";

...

<Results titleField="title" urlField="nps_link" />

Configuring search queries

edit

Certain aspects of search results can be configured in SearchProvider, using the searchQuery configuration, such as term highlighting and search fields. See the Search Query Configuration guide for more information.

Properties

edit

Name	Description
className
titleField	Name of field to use as the title from each result.
shouldTrackClickThrough	Whether or not to track a clickthrough event when clicked.
clickThroughTags	Tags to send to analytics API when tracking clickthrough.
urlField	Name of field to use as the href from each result.
thumbnailField	Name of field to use for thumbnail image. Should be a valid URL and at least 220px wide.
resultView	See Result component customization.
view	Used to override the default view for this Component. See View customization below.
*	Any other property passed will be passed through and available to use in a Custom View

View customization

edit

A complete guide to view customization can be found in the Customization: Component views and HTML section.

This component accepts two view props: view and resultView. The resultView allows you to customize the individual result items that are displayed. The view prop allows you to customize that wrapper around those results, which by default is simply a ul element.

A separate guide specifically for customizing the Result component can be found here., which can be used for providing a resultView prop.

The following properties are available in the view:

Name	Description
className	Passed through from main component
children

See Results.tsx for an example.

« SearchBox Result »