Results

The Result component renders the search results and pagination content.

Purpose

The Results component renders the result cards and pagination components.

Usage

See the useResults page for more usage details.

Basic

import React from "react";
import { Results } from "@usereactify/search";

import { ExampleResultCardProduct } from "./ExampleResultCardProduct";
import { ExampleResultCardCallout } from "./ExampleResultCardCallout";
import { ExampleResultPaginationNextPrev } from "./ExampleResultPaginationNextPrev";
import { ExampleResultPaginationNumbered } from "./ExampleResultPaginationNumbered";
import { ExampleResultPaginationLoadMore } from "./ExampleResultPaginationLoadMore";
import { ExampleResultPaginationInfiniteScroll } from "./ExampleResultPaginationInfiniteScroll";

export const Component: React.FC = () => {
  return (
    <Results
      listStyle={{
        display: "grid",
        gap: "10px",
        gridTemplateColumns: "repeat(4, minmax(0, 1fr))",
      }}
      gridColumns={4}
      renderResultCardProduct={ExampleResultCardProduct}
      renderResultCardCallout={ExampleResultCardCallout}
      renderPaginationNextPrev={ExampleResultPaginationNextPrev}
      renderPaginationNumbered={ExampleResultPaginationNumbered}
      renderPaginationLoadMore={ExampleResultPaginationLoadMore}
      renderPaginationInfiniteScroll={ExampleResultPaginationInfiniteScroll}
    />
  );
};

ExampleResultsProductCard

ExampleResultsCalloutCard

ExampleResultsPaginationNumbered

ExampleResultsPaginationNextPrev

ExamplePaginationLoadMore

ExamplePaginationInfiniteScroll

Props

type ResultsProps = {
  /** Style prop for the list wrapper */
  listStyle?: React.HTMLAttributes<HTMLElement>["style"];
  /** 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 once for each product result */
  renderResultCardProduct?: React.FC<
    ReturnType<typeof useProductPrice> & {
      pagePosition: number;
      document: ResultProduct;
      product: ResultProduct;
      itemRef: (node?: Element | null) => void;
      handleClick: () => void;
    }
  >;
  /** Render method called once for each callout result */
  renderResultCardCallout?: React.FC<{
    pagePosition: number;
    document: ResultCallout;
    callout: ResultCallout["callout"];
    itemRef: (node?: Element | null) => void;
    handleClick: () => void;
  }>;
  /** Render method called for pagination type "pagination" */
  renderPaginationNumbered?: React.FC<ReturnType<typeof usePagination>>;
  /** Render method called for pagination type "next_prev" */
  renderPaginationNextPrev?: React.FC<ReturnType<typeof usePagination>>;
  /** Render method called for pagination type "load_more" */
  renderPaginationLoadMore?: React.FC<ReturnType<typeof usePaginationLoadable>>;
  /** Render method called for pagination type "infinite_scroll" */
  renderPaginationInfiniteScroll?: React.FC<
    ReturnType<typeof usePaginationLoadable>
  >;
  /** Used to determine which filler callouts to use when there is an uneven grid */
  gridColumns?: number;
  /** Advanced Usage: Override the default amount of results per page */
  pageSize?: number;
  /** Advanced Usage: Override the default scrollTarget used to determine when infinite load should be triggered (infinite scroll) */
  infiniteScrollContainer?: React.ComponentProps<
    typeof ReactiveList
  >["scrollTarget"];
  /** Advanced Usage: Provide a specific result position to trigger loading more results (infinite scroll) */
  infiniteScrollPosition?: number;
  /** Advanced Usage: Shows subsequent loading states after initial results are loaded */
  showSubsequentLoadingStates?: boolean;
};