@usevyre/react @usevyre/vue

Pagination

A page navigation control with smart ellipsis truncation. Automatically hides out-of-range page numbers and replaces them with … dots while always keeping the first and last pages visible.

Basic

Fully controlled — provide page and onPageChange (React) or v-model (Vue).

Page 1 of 10

 
import { Pagination } from "@usevyre/react";

const [page, setPage] = useState(1);

<Pagination
  page={page}
  totalPages={10}
  onPageChange={setPage}
/>

Many pages with siblings

Use siblings to control how many page buttons appear around the current page. The component automatically inserts … where pages are skipped.

Page 7 of 20 · siblings=2

 
{/* Show 2 page siblings on each side of the current page */}
<Pagination
  page={page}
  totalPages={20}
  onPageChange={setPage}
  siblings={2}
/>

With info label

Add showInfo to switch to a full-width row layout with a Showing x–y of total label on the left and controls on the right. Provide totalItems + pageSize for the exact range; omit them to fall back to Page x of y.

Showing 1–10 of 98
Showing 1–10 of 98
 
{/* Showing x–y of total, computed from totalItems + pageSize */}
<Pagination
  page={page}
  totalPages={totalPages}
  onPageChange={setPage}
  showInfo
  totalItems={98}
  pageSize={10}
/>

{/* Without edge buttons */}
<Pagination
  page={page}
  totalPages={totalPages}
  onPageChange={setPage}
  showInfo
  showEdges={false}
  totalItems={98}
  pageSize={10}
/>

Props

Props

Prop Type Default Description
page / v-model number — Current page (1-indexed).
totalPages number — Total number of pages.
onPageChange (page: number) => void — (React) Called when the user navigates to a new page.
siblings number 1 Number of page buttons shown on each side of the current page.
showEdges boolean true Show first/last page jump buttons (⟪ / ⟫).
showInfo boolean false Show a 'Showing x–y of total' label on the left in a space-between row layout.
totalItems number — Total record count. Used with pageSize to compute the x–y range in the info label.
pageSize number — Records per page. Used with totalItems to compute the x–y range.
class / className string — Additional CSS class on the root element.
← Modal Popover →