Result
Stack Serverless
Displays a search result.
import { Result } from "@elastic/react-search-ui"; ... <SearchProvider config={config}> {({ results }) => { return ( <div> {results.map(result => ( <Result key={result.id.raw} result={result} titleField="title" urlField="nps_link" /> ))} </div> ); }} </SearchProvider> 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.
| 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. |
| result | Type: SearchResult. An object representing the search result to render. |
| 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 |
A complete guide to view customization can be found in the Customization: Component views and HTML section.
Example:
const CustomResultView = ({ result, onClickLink }: { result: SearchResult, onClickLink: () => void }) => ( <li className="sui-result"> <div className="sui-result__header"> <h3> {/* Maintain onClickLink to correct track click throughs for analytics*/} <a onClick={onClickLink} href={result.nps_link.raw}> {result.title.snippet} </a> </h3> </div> <div className="sui-result__body"> {/* use 'raw' values of fields to access values without snippets */} <div className="sui-result__image"> <img src={result.image_url.raw} alt="" /> </div> {/* Use the 'snippet' property of fields with dangerouslySetInnerHtml to render snippets */} <div className="sui-result__details" dangerouslySetInnerHTML={{ __html: result.description.snippet }} ></div> </div> </li> ); <Results resultView={CustomResultView} />; The following properties are available in the view:
| Name | Description |
|---|---|
| className | Passed through from main component. |
| result | Type: SearchResult. An object representing the search result to render. |
| onClickLink | function() - Call this when a link is clicked to trigger click tracking. Only triggered if shouldTrackClickThrough was set to true on the main component. |
| titleField | Passed through from main component. Not usually needed for custom views. |
| urlField | Passed through from main component. Not usually needed for custom views. |
| thumbnailField | Passed through from main component. Not usually needed for custom views. |
See Result.tsx for an example.