# Stats

### Purpose

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

### Usage

{% tabs %}
{% tab title="Basic" %}

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

import { ExampleStats } from "./ExampleStats";

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

{% endtab %}

{% tab title="ExampleStats" %}

```tsx
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>
  );
};

```

{% endtab %}
{% endtabs %}

### Props

```typescript
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;
  }>;
};
```