ResultCard
creates a card UI component for a particular result item, it can be used with ReactiveList
to display results in a card layout, suited for data that have an associated image.
Example uses:
- showing e-commerce search results in a card layout.
- showing filtered hotel booking results in a card layout.
Note
An alternative layout to ResultCard is a ResultList, which displays result data in a list format.
Usage
Basic Usage
import {
ReactiveList,
ResultCard
} from '@appbaseio/reactivesearch';
const { ResultCardsWrapper } = ReactiveList;
<ReactiveList
react={{
"and": ["PriceFilter", "SearchFilter"]
}}
componentId="SearchResult"
>
{({ data, error, loading, ... }) => (
<ResultCardsWrapper>
{
data.map(item => (
<ResultCard key={item._id}>
<ResultCard.Image src={item.image}/>
<ResultCard.Title
dangerouslySetInnerHTML={{
__html: item.original_title
}}
/>
<ResultCard.Description>
<div>
<div>by {item.authors}</div>
<div>
({item.average_rating} avg)
</div>
</div>
<span>
Pub {item.original_publication_year}
</span>
</ResultCard.Description>
</ResultCard>
))
}
</ResultCardsWrapper>
)}
</ReactiveList>
Props
id
Type | Optional |
---|---|
`string | number` |
The _id
property of the elasticsearch hit object. This prop is required to track the impressions for search results. Read More
target
Type | Optional |
---|---|
string |
Yes |
This prop is equivalent to the target
attribute of html a
tags. It defaults to _blank
.
href
Type | Optional |
---|---|
string |
Yes |
can be used to specify the URL of the page the link goes to
Note
ResultCard component accepts all the properties of html
a
tag.
Sub Components
Image
use it to render the result card image.
The ResultCard.Image
accepts the following props:
src
:string
source url of the image
Title
renders the title of the result card.
Description
can be used to render the result card description UI.
Demo
Examples
See more stories for ResultCard on playground.