mohitkyadav / react-pagination-nav

Pagination navbar component for react

React Pagination Navbar

Usage

Install the package

npm i react-pagination-nav

import the package

import ReactPaginationNav from 'react-pagination-nav'

const MyComponent = () => {
  const [currentPage, setCurrentPage] = React.useState(1)
  
  return (
    <div className="App">
      <ReactPaginationNav
        className="my-pagination-nav-bar-class"
        pageCount={9}
        visiblePages={5}
        currentPage={currentPage}
        goToNextPage={() => setCurrentPage(currentPage + 1)}
        goToPreviousPage={() => setCurrentPage(currentPage - 1)}
        goToPage={(newPage) => setCurrentPage(newPage)}
        PrevNextButton={({ direction, onClick }) => <CustomButton onClick={onClick}>{direction === 'prev' ? '<' : '>'}</CustomButton>}
        PageButton={({ page, active, onClick }) => <CustomButton onClick={onClick} active={active}>{page + 1}</CustomButton>}
      />
    </div>
  )
}

props

• className 👉 :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'

Author

License

MIT Licensed. Copyright (c) Mohit Kumar Yadav 2020.