Pagination 10.24.13

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;

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.

These are props specific to the Pagination.PrevButton component:

Name	Type	Default
as	string	button
className	string	-
disabled	boolean	-

These are props specific to the Pagination.NextButton component:

Name	Type	Default
as	string	button
className	string	-
disabled	boolean	-

These are props specific to the Pagination.Pages component:

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