ResultList
creates a list UI component for a particular result item, it can be used with ReactiveList
to display results in a list layout, suited for data that needs a compact display.
Example uses:
- showing e-commerce search listings.
- showing filtered hotel booking results.
Note
An alternative layout to ResultList is a ResultCard, which displays result data in a card layout.
Usage
Basic Usage
import {
ReactiveList,
ResultList
} from '@appbaseio/reactivesearch';
const { ResultListWrapper } = ReactiveList;
<ReactiveList
react={{
"and": ["PriceFilter", "SearchFilter"]
}}
componentId="SearchResult"
>
{({ data, error, loading, ... }) => (
<ResultListWrapper>
{
data.map(item => (
<ResultList key={item._id}>
<ResultList.Image src={item.image} />
<ResultList.Content>
<ResultList.Title
dangerouslySetInnerHTML={{
__html: item.original_title
}}
/>
<ResultList.Description>
<div>
<div>by {item.authors}</div>
<div>
({item.average_rating} avg)
</div>
</div>
<span>
Pub {item.original_publication_year}
</span>
</ResultList.Description>
</ResultList.Content>
</ResultList>
))
}
</ResultListWrapper>
)}
</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
as
Type | Optional |
---|---|
string |
Yes |
The html element tag which the component should use. Defaults to a
(anchor tag).
Note
ResultList component accepts all the properties of html
a
tag.
Sub Components
Image
use it to render the result list image.
The ResultList.Image
accepts the following properties:
src
:string
source url of the imagesmall
:boolean
defaults tofalse
, iftrue
then renders an image of small size.
Content
use it to wrap the result list content other than image.
Title
renders the title of the result list.
Description
can be used to render the result list description UI.
Demo
Examples
See more stories for ResultList on playground.