Chakra UIとMantine Hooksでページネーションを作成する

次のようなページネーション用のコンポーネントをChakra UIとMantine Hooksで作っていく。

…

ページネーション用のボタンの作成

PaginationButton.tsx


import { Button, ButtonProps } from "@chakra-ui/react";
type PaginationProps = ButtonProps & {
    isCurrent: boolean;
};
function PaginationButton({ isCurrent, ...props }: PaginationProps) {
    return (
        <Button
            width='2rem'
            colorScheme={isCurrent ? 'purple' : 'gray'}
            variant={isCurrent ? 'solid' : 'outline'}
            {...props as any}
        />
    );
};

propsの isCurrent が true であれば、ボタンの色とスタイルを変更するようにする。

Mantine HooksのusePaginationの使い方

usePaginationは次のように使用する。

usePaginationの例


const { range } = usePagination({
    // 総ページ数
    total: 10,
    // 現在のページ数
    page: 5,
    siblings: 1,
    boundaries: 1
});

siblings は現在のページの隣り合うボタンの数、 boundaries は両端のボタンの数を表している。デフォルトではどちらも1になっている。

usePaginationの使い方

range の中身はページ数とドットの配列である。

rangeの中身


[1, 'dots', 4, 5, 6, 'dots', 10]

ページネーションコンポーネントの作成

Pagination.tsx


import { HStack, Box } from "@chakra-ui/react";
import { usePagination } from "@mantine/hooks";
import { PaginationButton } from "./PaginationButton";
type PaginationProps = {
    // 現在のページ数
    currentPageNum: number;
    // 総ページ数
    allPageNum: number;
    // 現在のページ数を変更する関数
    changePageNum: (pageNum: number) => void;
};
export function Pagination({ changePageNum, currentPageNum, allPageNum }: PaginationProps) {
    const { range } = usePagination({
        total: allPageNum,
        page: currentPageNum,
        siblings: 1,
        boundaries: 1
    });
    return (
        <HStack {...props}>
            {range.map((pageNum, i) => {
                return pageNum === 'dots'
                    ? (
                        <Box
                            key={i}
                            color='subtext'
                            children='…'
                        />
                    )
                    : (
                        <PaginationButton
                            key={i}
                            isCurrentPage={pageNum === currentPageNum}
                            onClick={() => changePageNum(pageNum)}
                            children={pageNum}
                        />
                    );
            })}
        </HStack>
    );
};

たとえば、次のように使うと最初のサンプルのような見た目になる。

Paginationの使い方


<Pagination
    currentPageNum={5}
    allPageNum={10}
    changePageNum={() => { }} 
/>