Pagination

ASCII-styled pagination component with page numbers, navigation arrows, and smart ellipsis handling.

Docs•API Reference

Basic Pagination

...
Page 1 of 10

Many Pages (with ellipsis)

...
Page 5 of 50

Few Pages (no first/last)

Page 1 of 5

Installation

npm install react-ascii-ui

Usage

import { AsciiPagination } from 'react-ascii-ui';

export default function Example() {
  const [currentPage, setCurrentPage] = useState(1);
  const totalPages = 20;

  return (
    <AsciiPagination
      currentPage={currentPage}
      totalPages={totalPages}
      onPageChange={setCurrentPage}
    />
  );
}

Examples

Basic Pagination

...
<AsciiPagination
  currentPage={3}
  totalPages={10}
  onPageChange={handlePageChange}
/>

Many Pages (with ellipsis)

......
<AsciiPagination
  currentPage={15}
  totalPages={100}
  onPageChange={handlePageChange}
/>

Custom Visible Pages

......
<AsciiPagination
  currentPage={8}
  totalPages={25}
  onPageChange={handlePageChange}
  maxVisiblePages={3}
/>

Without First/Last Buttons

......
<AsciiPagination
  currentPage={5}
  totalPages={20}
  onPageChange={handlePageChange}
  showFirstLast={false}
/>

Few Pages (no ellipsis needed)

<AsciiPagination
  currentPage={2}
  totalPages={4}
  onPageChange={handlePageChange}
/>

Edge Cases

First Page:
...
Last Page:
...
// First page - Previous button disabled
<AsciiPagination currentPage={1} totalPages={10} onPageChange={...} />

// Last page - Next button disabled  
<AsciiPagination currentPage={10} totalPages={10} onPageChange={...} />

API Reference

Props

PropTypeDefaultDescription
currentPagenumber-Current active page number
totalPagesnumber-Total number of pages
onPageChange(page: number) => void-Callback when page is changed
maxVisiblePagesnumber5Maximum number of page buttons to show
showFirstLastbooleantrueWhether to show first and last page buttons
classNamestring""Additional CSS classes

Features

  • Smart Ellipsis: Shows "..." when there are too many pages
  • Edge Handling: Always shows first and last pages when using ellipsis
  • Navigation Arrows: [Prev] and [Next] buttons with bracket styling
  • Active State: Current page highlighted with white background
  • Disabled States: Previous/Next buttons disabled at edges
  • Responsive Layout: Adapts to different page counts intelligently
  • Click Safety: Prevents invalid page navigation

Behavior

  • Pages are 1-indexed (starts from 1, not 0)
  • Current page is highlighted with white background and black text
  • Previous button is disabled when on first page
  • Next button is disabled when on last page
  • Ellipsis (...) appears when there are gaps in page numbers
  • Always shows first and last pages when showFirstLast is true

AsciiPagination extends all HTML div attributes and supports all React div props.