Pagination — numbered page와 opaque cursor를 분리하는 Pagination

1-based numbered items·pages와 opaque cursor 탐색, semantic web navigation과 네이티브 adaptive 표현을 제공하는 Expo·React Native Pagination입니다.

v0.4.0 공개 예정

이 컴포넌트는 현재 소스에 포함된 다음 릴리스 미리보기입니다. npm latest에 반영될 때까지 검색 색인에서 제외됩니다.

Pagination 직접 조작해 보기

LIVE PLAYGROUND

한 컴포넌트, 세 가지 탐색 계약

모드와 표현을 바꾼 뒤 실제 이전·다음·페이지 버튼을 눌러 controlled 상태를 확인하세요.

controlled

데이터 계약

표현

방향

Disabled

Busy

중복 페이지 요청을 잠급니다.

총 128개 · 페이지당 20개

LTR · auto

auto는 웹에서 full 번호를 유지하고, 네이티브에서는 theme.breakpoints.tablet 아래에서 compact로 전환합니다. cursor는 위치를 계산하지 않으므로 앱이 의미 있는 statusLabel을 제공합니다.

Pagination 사용 시점과 역할

Pagination은 전체 item count에서 page 수를 계산하는 branch, 이미 계산된 page count를 받는 branch, 숫자 위치를 알 수 없는 cursor branch를 타입으로 분리합니다. 웹은 실제 nav·ordered list·button과 현재 페이지 하나의 aria-current를 유지하고, 네이티브 auto는 작은 화면에서 compact 이전·상태·다음, 태블릿 이상에서 full numbered range로 적응합니다. DataTable에 내장되지 않아 앱이 현재 rows, fetch와 page를 하나의 정본으로 소유할 수 있습니다.

items·pages countMode와 cursor mode를 never prop으로 분리하는 controlled 계약
boundaryCount·siblingCount 기반 deterministic range와 compact·full·auto 표현
page change reason, item offset 범위와 cursor capability를 전달하는 typed callback detail

설치와 최소 예제

Pagination: 패키지 루트 엔트리에서 import한 뒤 앱이 소유한 상태와 이벤트를 연결하세요.

TypeScript

pnpm add @gj-kit/expo-ui

import { Pagination } from '@gj-kit/expo-ui';

<Pagination mode="numbered" countMode="items" accessibilityLabel="결제 페이지" page={page} totalItemCount={totalItemCount} pageSize={20} onPageChange={setPage} />

접근성과 플랫폼 동작

accessibilityLabel이 전체 navigation 목적을 명명합니다. 웹은 nav 안의 실제 ol·li·button을 사용하고 현재 page button 하나에만 aria-current=page를 둡니다. ellipsis는 접근성 트리에서 숨기며 이전·다음 문구는 UiProvider strings에서 현지화합니다. 네이티브는 이름 있는 toolbar와 button의 selected·disabled·busy 상태를 사용하고 지원하지 않는 웹 navigation landmark를 가장하지 않습니다.

기본 스타일은 현재 UiProvider 테마의 color, spacing, radius, typography, metric 역할에서 파생됩니다. Expo, bare React Native와 React Native Web에서 같은 prop 계약을 사용합니다.

함께 사용하는 컴포넌트