Pagination Pages

This document presents a reusable React component for displaying pagination summary with i18n and placeholder support.

PaginationPages Element

The PaginationPages is a React component that displays information about the results of a paginated list, such as:

Showing 11 to 20 of 42 results

It supports multilingual environments (i18n) and dynamic placeholders from a CMS or content management system.

Props

interface Props {
  pagination: PaginationType;
}

In detail, the pagination object contains:

• page: The current page number.
• per_page: Number of items per page.
• total_items: Total number of items.

How It Works

The component:

1. Calculates which items are being shown on the current page.
2. Checks for a custom placeholder (e.g., from CMS).
3. If found, replaces variables ({first_item}, {last_item}, etc.) with actual values.
4. If not, displays a fallback message using translations.
5. Finally, returns the HTML using dangerouslySetInnerHTML.

Full Code with Explanations

PaginationPages.tsx

import { useTranslations } from "next-intl"; // For translations
import { useData } from "@/context/DataContext"; // Access to CMS placeholders
import { PaginationType } from "@/type_all";
import { pageSectionEnumType } from "@/types/page_sections/types";

interface Props {
  pagination: PaginationType;
}

const PaginationPages = ({ pagination }: Props) => {
  const t = useTranslations("Pagination"); // Translations from "Pagination" namespace
  const { getPlaceholder } = useData(); // Function to get custom text

  const { total_items = 0 } = pagination;
  const { page = 1, per_page = 10 } = pagination || {};

  const totalEndItem = Math.min(page * per_page, total_items);
  const firstItem = total_items > 0 ? (page - 1) * per_page + 1 : 0;

  const rawTitle = getPlaceholder(
    pageSectionEnumType.GENERAL,
    "Pagination - Showing results [rich editor]2",
  );

  const title = rawTitle
    ? rawTitle
        .replace("{first_item}", firstItem.toString())
        .replace("{last_item}", totalEndItem.toString())
        .replace("{total_items}", total_items.toString())
    : null;

  return (
    <div
      className="text-sm text-center mx-auto sm:mx-0"
      dangerouslySetInnerHTML={{
        __html:
          title ||
          `<p>${t("showing")} <strong>${firstItem}</strong> ${t("to")} <strong>${totalEndItem}</strong> ${t("of")} <strong>${total_items}</strong> ${t("results")}</p>`,
      }}
    ></div>
  );
};

export default PaginationPages;

Example Usage

<PaginationPages
  pagination={{
    page: 2,
    per_page: 10,
    total_items: 42,
  }}
/>

This will render:

<p>
  Εμφανίζονται <strong>11</strong> έως <strong>20</strong> από
  <strong>42</strong> αποτελέσματα
</p>

Or, if a CMS placeholder is available:

<p>
  Αποτελέσματα από <strong>11</strong> έως <strong>20</strong> από σύνολο
  <strong>42</strong>
</p>

Notes

• Using dangerouslySetInnerHTML allows rich text display (e.g., bold), but the content must be safe and sanitized.
• The component works great in applications with multilingual support or dynamic content.

  ---

  We'd love your feedback

  Was this helpful?

  Yes

  No