ResultList

The ResultList component renders the search results and pagination content.

Purpose

The ResultList component renders the result cards and pagination components.

Usage

Basic

import React from "react";
import { ResultList, ResultCard, ResultCardCallout, ResultPagination, ResultLoadMoreButton, ResultPaginationNextPrev } from "@usereactify/search";

export const Component: React.FC = () => {
  return (
    <ResultList
      gridStyle={{}}
      gridColumns={4}
      gridGap={4}
      pageSize={24}
      renderLoading={() => <>Loading...</>}
      renderNoResults={() => <>No results.</>}
      renderError={() => <>Error loading results...</>}
      renderResultCard={(props) => <ResultCard {...props} />}
      renderResultCardCallout={(props) => <ResultCardCallout {...props} />}
      renderPagination={(props) => <ResultPagination {...props} />}
      renderLoadMoreButton={(props) => <ResultLoadMoreButton {...props} />}
      renderPaginationNextPrev={(props) => <ResultPaginationNextPrev {...props} />}
    />
  );
};

Props

type ResultsProps = {
  /** Classname prop for the list wrapper */
  listClassName?: string;
  /** Render method called when an error occurs */
  renderError?: React.FC<{ error: ReactivesearchError }>;
  /** Render method called while loading for the first time */
  renderLoading?: React.FC;
  /** Render method called when no results are found */
  renderNoResults?: React.FC;
  /** Render method called before results */
  renderBefore?: React.FC;
  /** Render method called after results */
  renderAfter?: React.FC;
  /** Render method called once for each product result */
  renderResultCard?: React.FC;
  /** Render method called once for each callout result */
  renderResultCardCallout?: React.FC;
  /** Render method called for pagination type "pagination" */
  renderPagination?: React.FC;
  /** Render method called for pagination type "next_prev" */
  renderPaginationNextPrev?: React.FC;
  /** Render method called for pagination type "load_more" */
  renderLoadMoreButton?: React.FC;
  /** Advanced Usage: Override the default amount of results per page */
  pageSize?: number;
};