Image to be displayed

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

Copy 
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 image
  • small: boolean defaults to false, if true 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.

ResultList stories