import {Pagination} from '@primer/react-brand'
Examples
Default
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 />)
Hide page numbers
<Pagination pageCount={15} currentPage={5} showPages={false} />
Custom href
<Pagination pageCount={3} currentPage={1} hrefBuilder={n => `https://primer.style/brand/page/${n}`} />
Custom data attributes
<Pagination pageCount={3} currentPage={1} pageAttributesBuilder={n => { return { 'data-custom-attribute': `custom-attribute-${n}`, } }} />
Component props
Pagination Required
name | type | default | required | description |
---|---|---|---|---|
pageCount | number | true | The total number of pages | |
currentPage | number | true | The current page number | |
onPageChange | (e: React.MouseEvent, n: number) => void | false | Callback function for when the page changes | |
hrefBuilder | (n: number) => string | false | Function to build the href for each page | |
pageAttributesBuilder | (n: number) => {[attributeName: string]: string} | false | Forward custom attributes to pagination links. | |
marginPageCount | number | false | Defines how many pages are to be displayed on the left and right of the component. Will be reduced on narrow viewports. | |
showPages | boolean | false | Whether to show the page numbers | |
surroundingPageCount | number | false | The number of pages to show on each side of the current page. Will be hidden on narrow viewports. |