Pagination 10.17.4

ARIA
RTL

Pagination is the process of splitting information over multiple pages instead of showing it all on a single page.

Also the name for the interface component used for navigating between these pages.

Anatomy

<Pagination>
  <Pagination.PrevButton>...</Pagination.PrevButton>
  <Pagination.Pages />
  <Pagination.NextButton>...</Pagination.NextButton>
</Pagination>

Default

"use client";

import { useState } from "react";
import { Pagination } from "@heathmont/moon-core-tw";

const Default = () => {
  const [page, setPage] = useState<number>(0);
  const handlePageChange = (page: number) => {
    setPage(page);
  };
  return (
    <>
      <Pagination
        totalPages={11}
        currentPage={page}
        setCurrentPage={handlePageChange}
      >
        <Pagination.PrevButton>Previous</Pagination.PrevButton>
        <Pagination.Pages />
        <Pagination.NextButton>Next</Pagination.NextButton>
      </Pagination>
    </>
  );
};

export default Default;

    Using the button

    Utilize the IconButton and button components for pagination.

    "use client";

import { useState } from "react";
import { Pagination, IconButton } from "@heathmont/moon-core-tw";
import {
  ControlsChevronLeftSmall,
  ControlsChevronRightSmall,
} from "@heathmont/moon-icons-tw";

const WithButton = () => {
  const [page, setPage] = useState<number>(0);
  const handlePageChange = (page: number) => {
    setPage(page);
  };
  return (
    <>
      <Pagination
        totalPages={26}
        currentPage={page}
        setCurrentPage={handlePageChange}
      >
        <Pagination.PrevButton as="div">
          {({ disabled }) => (
            <IconButton
              icon={<ControlsChevronLeftSmall className="rtl:rotate-180" />}
              variant="outline"
              size="sm"
              disabled={disabled}
              aria-label="Previous"
            />
          )}
        </Pagination.PrevButton>
        <Pagination.Pages as="button" />
        <Pagination.NextButton as="div">
          {({ disabled }) => (
            <IconButton
              icon={<ControlsChevronRightSmall className="rtl:rotate-180" />}
              variant="outline"
              size="sm"
              disabled={disabled}
              aria-label="Next"
            />
          )}
        </Pagination.NextButton>
      </Pagination>
    </>
  );
};

export default WithButton;

      With array of page hrefs

      Trigger URL changes when the pagination's changes.

      "use client";

import { useCallback, useEffect, useMemo, useState } from "react";
import { IconButton, Pagination } from "@heathmont/moon-core-tw";
import {
  ControlsChevronLeftSmall,
  ControlsChevronRightSmall,
} from "@heathmont/moon-icons-tw";

const WithArrayOfPageHREFs = () => {
  const [page, setPage] = useState<number>(0);
  const handlePageChange = useCallback((page: number) => {
    setPage(page);
  }, []);
  const hrefsArray = useMemo(() => {
    return Array.from({ length: 10 }, (_, i) => `#?${i + 1}`);
  }, []);
  useEffect(() => {
    // set initial route
    if (window.location.hash !== "") {
      setPage(parseInt(window.location.hash.slice(2) || "1") - 1);
    }
  }, []);

  return (
    <Pagination
      totalPages={hrefsArray.length}
      hrefsArray={hrefsArray}
      currentPage={page}
      setCurrentPage={handlePageChange}
    >
      <Pagination.PrevButton as="a" href={hrefsArray[page - 1]}>
        {({ disabled }) => (
          <IconButton
            icon={<ControlsChevronLeftSmall className="rtl:rotate-180" />}
            variant="outline"
            size="sm"
            disabled={disabled}
            aria-label="Previous"
          />
        )}
      </Pagination.PrevButton>
      <Pagination.Pages />
      <Pagination.NextButton as="a" href={hrefsArray[page + 1]}>
        {({ disabled }) => (
          <IconButton
            icon={<ControlsChevronRightSmall className="rtl:rotate-180" />}
            variant="outline"
            size="sm"
            disabled={disabled}
            aria-label="Next"
          />
        )}
      </Pagination.NextButton>
    </Pagination>
  );
};

export default WithArrayOfPageHREFs;

        Pagination

        These are props specific to the Pagination component:

        Name
        Type
        Default
        className
        		string-
        currentPage*
        		number-
        hrefsArray
        		"string[]"-
        setCurrentPage*
        		(page: number) => void-
        totalPages*
        		number-

        Properties indicated with * are required.

        Pagination.PrevButton

        These are props specific to the Pagination.PrevButton component:

        Name
        Type
        Default
        as
        		stringbutton
        className
        		string-
        disabled
        		boolean-

        Pagination.NextButton

        These are props specific to the Pagination.NextButton component:

        Name
        Type
        Default
        as
        		stringbutton
        className
        		string-
        disabled
        		boolean-

        Pagination.Pages

        These are props specific to the Pagination.Pages component:

        Name
        Type
        Default
        as
        		stringa
        className
        		string-
        truncableText
        		"JSX.Element" | string...