React pagination navbar
npm install react-pagination-nav
!Demo
npm i react-pagination-nav
import the package
import ReactPaginationNav from 'react-pagination-nav'
const MyComponent = () => {
const [currentPage, setCurrentPage] = React.useState(1)
return (
pageCount={9}
visiblePages={5}
currentPage={currentPage}
goToNextPage={() => setCurrentPage(currentPage + 1)}
goToPreviousPage={() => setCurrentPage(currentPage - 1)}
goToPage={(newPage) => setCurrentPage(newPage)}
PrevNextButton={({ direction, onClick }) => {direction === 'prev' ? '<' : '>'} }
PageButton={({ page, active, onClick }) => {page + 1} }
/>
)
}
props
*
👉 :optional: custom class name for the container
* pageCount 👉 total pages
visiblePages 👉 :optional, default 5: number of visible pages, output would be same for any even number and number + 1*
* isPreviousBtnHidden 👉 :optional, if true previous button is hidden
* isNextBtnHidden 👉 :optional, if true next button is hidden
* currentPage 👉 current active page
* goToNextPage 👉 :funtion: called when clicked on right arrow button
* goToPreviousPage👉 :funtion: called when clicked on left arrow button
* goToPage 👉 :funtion: called when clicked on a page number
* PrevNextButton 👉 :optional component: a button component for the prev and next buttons
* PageButton 👉 :optional component: a button component for the page buttons
* theme` 👉 :optional: default 'dark', can either be set to 'light' or 'dark'
!NPM