use-pagination

use-pagination

페이지네이션에 필요한 데이터를 계산하는 훅이에요. 페이지 범위, 활성 페이지, 이전·다음·첫·마지막 페이지 이동 함수를 제공해요.

출처: 문서

본문

형제(siblings) 개수

선택된 페이지 좌우에 표시할 항목(sibling)의 개수를 siblings로 제어해요.

import { Text, Pagination } from '@mantine/core';

function Demo() {
  return (
    <>
      1 sibling (default)

      2 siblings

      3 siblings

  );
}

경계 (Boundaries)

각 경계(boundary)에 표시할 항목의 개수를 boundaries로 제어해요.

import { usePagination } from '@mantine/hooks';

const pagination = usePagination({ total: 20, boundaries: 3 });

시작 값 (Start value)

시작 페이지 번호를 정의하려면 startValue를 설정해요. 예를 들어 startValue={5}와 total={15}로 설정하면 페이지네이션 범위는 5부터 15가 돼요.

import { Button, Group, Text } from '@mantine/core';
import { usePagination } from '@mantine/hooks';

function Demo() {
  const pagination = usePagination({ total: 15, startValue: 5, initialPage: 5 });

  return (
    <>
      Active page: {pagination.active}
      Range: [{pagination.range.join(', ')}]

          First

          Previous

        {pagination.range.map((page, index) =>
          page === 'dots' ? (
            ...
          ) : (
             pagination.setPage(page)}
              variant={pagination.active === page ? 'filled' : 'default'}
              miw={34}
            >
              {page}

          )
        )}

          Next

          Last

  );
}

정의 (Definition)

export interface UsePaginationOptions {
  /** Page selected on initial render, defaults to 1 or startValue if provided */
  initialPage?: number;

  /** Controlled active page number */
  page?: number;

  /** Total amount of pages */
  total: number;

  /** Siblings amount on left/right side of selected page, defaults to 1 */
  siblings?: number;

  /** Amount of elements visible on left/right edges, defaults to 1  */
  boundaries?: number;

  /** Callback fired after change of each page */
  onChange?: (page: number) => void;

  /** Starting page number, defaults to 1 */
  startValue?: number;
}

export interface UsePaginationReturnValue {
  /** Array of page numbers and dots */
  range: (number | 'dots')[];

  /** Active page number */
  active: number;

  /** Function to set active page */
  setPage: (page: number) => void;

  /** Function to go to next page */
  next: () => void;

  /** Function to go to previous page */
  previous: () => void;

  /** Function to go to first page */
  first: () => void;

  /** Function to go to last page */
  last: () => void;
}

function usePagination(settings: UsePaginationOptions): UsePaginationReturnValue;

내보내는 타입 (Exported types)

UsePaginationOptions와 UsePaginationReturnValue 타입은 @mantine/hooks 패키지에서 내보내져요. 애플리케이션에서 임포트할 수 있어요.

import type { UsePaginationOptions, UsePaginationReturnValue } from '@mantine/hooks';

더 알아보기 (Learn more)

• use-map
• use-previous