https://github.com/mohitkyadav/react-pagination-nav

Pagination navbar component for react
https://github.com/mohitkyadav/react-pagination-nav

js npm pages pagination-navbar react react-pagination

Last synced: 25 days ago
JSON representation

Pagination navbar component for react

• Host: GitHub
• URL: https://github.com/mohitkyadav/react-pagination-nav
• Owner: mohitkyadav
• License: mit
• Created: 2020-07-20T04:30:08.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2020-10-06T07:14:43.000Z (about 4 years ago)
• Last Synced: 2024-09-26T07:44:29.381Z (about 1 month ago)
• Topics: js, npm, pages, pagination-navbar, react, react-pagination
• Language: JavaScript
• Homepage: https://www.npmjs.com/package/react-pagination-nav
• Size: 2.22 MB
• Stars: 10
• Watchers: 1
• Forks: 4
• Open Issues: 2
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# React Pagination Navbar

[![npm](https://img.shields.io/npm/v/react-pagination-nav?style=for-the-badge)](https://www.npmjs.com/package/react-pagination-nav)

[![node-current](https://img.shields.io/node/v/react-pagination-nav?style=for-the-badge)](https://www.npmjs.com/package/react-pagination-nav)

[![npm](https://img.shields.io/npm/dt/react-pagination-nav?style=for-the-badge)](https://www.npmjs.com/package/react-pagination-nav)

![Demo](./demo/demo.gif)

## 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 (

    


       setCurrentPage(currentPage + 1)}

        goToPreviousPage={() => setCurrentPage(currentPage - 1)}

        goToPage={(newPage) => setCurrentPage(newPage)}

        PrevNextButton={({ direction, onClick }) => {direction === 'prev' ? '<' : '>'}}

        PageButton={({ page, active, onClick }) => {page + 1}}

      />

    

  )

}

```

## 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

[![GH](https://img.shields.io/badge/github-mohit_kumar_yadav-34bf49?logo=github&style=for-the-badge)](https://github.com/mohitkyadav)

[![Discord](https://img.shields.io/discord/522610943037931551?color=7389D8&logo=discord&style=for-the-badge)](https://discord.gg/bJGQRJx)

# License

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

![NPM](https://img.shields.io/npm/l/react-pagination-nav?style=for-the-badge)