Pagination

const App = () => {
  const [currentPage, setCurrentPage] = React.useState(5)
  const totalPages = 10

  const handlePageChange = (e, pageNumber) => {
    if (pageNumber === currentPage + 1 && currentPage < totalPages) {
      // Next page handler
      setCurrentPage(currentPage + 1)
    } else if (pageNumber === currentPage - 1 && currentPage > 1) {
      // Previous page handler
      setCurrentPage(currentPage - 1)
    } else if (pageNumber >= 1 && pageNumber <= totalPages) {
      setCurrentPage(pageNumber)
    }
  }

  return (
    <Pagination
      pageCount={10}
      currentPage={currentPage}
      onPageChange={handlePageChange}
    />
  )
}

render(<App />)

<Pagination pageCount={15} currentPage={5} showPages={false} />

<Pagination
  pageCount={15}
  currentPage={5}
  showPages={{narrow: false, regular: true, wide: true}}
/>

<Pagination
  pageCount={3}
  currentPage={1}
  hrefBuilder={(n) => `https://primer.style/brand/page/${n}`}
/>

<Pagination
  pageCount={3}
  currentPage={1}
  pageAttributesBuilder={(n) => {
    return {
      'data-custom-attribute': `custom-attribute-${n}`,
    }
  }}
/>