Function Pagination

  • Pagination(props: PaginationProps): null | Element

  • Renders pagination controls for navigating through paginated content

    Features:

    • Previous/Next page navigation buttons
    • Current page and total pages indicator
    • Automatic disabling of buttons at boundaries
    • Accessibility support with ARIA labels
    • Dark mode compatible styling
    • Responsive design
    • Auto-hides when only one page exists

    Visual Elements:

    • Previous button with left chevron icon
    • Next button with right chevron icon
    • Current page / total pages display
    • Focus states for keyboard navigation
    • Disabled states for boundary conditions

    Boundary Handling:

    • Disables Previous button on first page
    • Disables Next button on last page
    • Prevents navigation beyond valid range
    • Returns null when totalPages <= 1

    Parameters

    • props: PaginationProps

      Component properties

      Props for the Pagination component

      PaginationProps

      • currentPage: number

        Current page number (1-based indexing)

      • onPageChange: (page: number) => void

        Callback function triggered when page number changes

      • totalPages: number

        Total number of available pages

    Returns null | Element

    The pagination controls, or null if only one page exists

    Example

    <Pagination
      currentPage={1}
      totalPages={5}
      onPageChange={(page) => setCurrentPage(page)}
    />

Settings

Member Visibility