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.


An alternative layout to ResultList is a ResultCard, which displays result data in a card layout.


Basic Usage

import {
} from '@appbaseio/reactivesearch';

const { ResultListWrapper } = ReactiveList;

        "and": ["PriceFilter", "SearchFilter"]
    {({ data, error, loading, ... }) => (
       => (
                    <ResultList key={item._id}>
                        <ResultList.Image src={item.image} />
                                    __html: item.original_title
                                    <div>by {item.authors}</div>
                                        ({item.average_rating} avg)
                                    Pub {item.original_publication_year}


  • 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
  • as string [optional] The html element tag which the component should use. Defaults to a(anchor tag).


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.



See more stories for ResultList on playground.

ResultList stories