Components
Pagination

Pagination

The Pagination component allows you to navigate through large sets of data by dividing it into smaller chunks, making it easier for users to browse through your application.

Basic Usage

First, import the required components from the package:

import {
  Pagination,
  PaginationEllipsis,
  PaginationList,
  PaginationListItem,
  PaginationNextPageTrigger,
  PaginationPageTrigger,
  PaginationPrevPageTrigger,
} from '@ark-ui/react'

Here’s an example of how to use the Pagination component:

import { useState } from 'react'
import {
  Pagination,
  PaginationEllipsis,
  PaginationList,
  PaginationListItem,
  PaginationNextPageTrigger,
  PaginationPageTrigger,
  PaginationPrevPageTrigger,
} from '@ark-ui/react'

const Basic = () => (
  <Pagination defaultPage={2} count={5000} pageSize={10} siblingCount={2}>
    {({ pages }) => (
      <PaginationList>
        <PaginationListItem>
          <PaginationPrevPageTrigger>Previous Page</PaginationPrevPageTrigger>
        </PaginationListItem>
        {pages.map((page, index) =>
          page.type === 'page' ? (
            <PaginationListItem key={index}>
              <PaginationPageTrigger {...page}>{page.value}</PaginationPageTrigger>
            </PaginationListItem>
          ) : (
            <PaginationListItem key={index}>
              <PaginationEllipsis index={index}>&#8230;</PaginationEllipsis>
            </PaginationListItem>
          ),
        )}
        <PaginationListItem>
          <PaginationNextPageTrigger>Next Page</PaginationNextPageTrigger>
        </PaginationListItem>
      </PaginationList>
    )}
  </Pagination>
)

Controlled Pagination

To create a controlled Pagination component, manage the state of the current page using the page prop and update it when the onChange event handler is called:

import { useState } from 'react'
import {
  Pagination,
  PaginationEllipsis,
  PaginationList,
  PaginationListItem,
  PaginationNextPageTrigger,
  PaginationPageTrigger,
  PaginationPrevPageTrigger,
} from '@ark-ui/react'

const Controlled = () => {
  const [currentPage, setCurrentPage] = useState(1)

  return (
    <Pagination
      count={5000}
      pageSize={10}
      siblingCount={2}
      page={currentPage}
      onPageChange={(details) => setCurrentPage(details.page)}
    >
      {/* ... */}
    </Pagination>
  )
}

Customizing Pagination

You can customize the Pagination component by setting various props such as dir, pageSize, siblingCount, and translations. Here’s an example of a customized Pagination:

import { useState } from 'react'
import {
  Pagination,
  PaginationEllipsis,
  PaginationList,
  PaginationListItem,
  PaginationNextPageTrigger,
  PaginationPageTrigger,
  PaginationPrevPageTrigger,
} from '@ark-ui/react'

const Customized = () => (
  <Pagination
    count={5000}
    pageSize={20}
    siblingCount={3}
    dir="ltr"
    translations={{
      nextPageTriggerLabel: 'Next',
      prevPageTriggerLabel: 'Prev',
      pageTriggerLabel: (details) => `Page ${details.page}`,
    }}
  >
    {/* ... */}
  </Pagination>
)

Conclusion

The Pagination component offers an intuitive and flexible solution for managing paginated content in your applications. With its extensive set of features and customization options, it can accommodate a wide range of use cases and designs.

Previous

Number Input

Next

Pin Input