Stats

Purpose

The Stats component is used to display basic stats related to the search such as total results.

Usage

Basic

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

import { ExampleStats } from "./ExampleStats";

export const Component: React.FC = () => {
  return (
    <Stats
      render={ExampleStats}
    />
  );
};

ExampleStats

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

export type ExampleStatsProps = React.ComponentProps<
  NonNullable<StatsProps["render"]>
>;

export const ExampleStats: React.FC<ExampleStatsProps> = (props) => {
  return (
    <div>
      {"Found "}
      {props.resultStats.numberOfResults}
      {" products"}
    </div>
  );
};

Props

type StatsProps = {
  /** Render method */
  render?: React.FC<{
    isLoading: boolean;
    hits: {
      hidden: number;
      time: number;
      total: number;
      hits: Array<ElasticHit>;
    };
    resultStats: {
      hidden: number;
      numberOfResults?: number;
      promoted: number;
      time: number;
    };
    error?: ReactivesearchError;
  }>;
};