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 string|number [optional]

The _id property of the elasticsearch hit object. This prop is required to track the impressions for search results. Read More

  • target string [optional] This prop is equivalent to the target attribute of html a tags. It defaults to _blank.
  • href string [optional] can be used to specify the URL of the page the link goes to

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