nice-pagination

You will have a nice and simple to use pagination component.

Install

Use for React v18:

npm install --save nice-pagination

Use for React v17:

npm install --save [email protected]

Use for React v16:

npm install --save [email protected]

Online Demo

Visit this link: https://simacoders.ir/features/#NicePagination

Usage

import React from 'react'
import NicePagination from 'nice-pagination'
import 'nice-pagination/dist/index.css'

const Example = () => {
  return <NicePagination  initialPage={1} totalPages={10} minButtonsToDots={6}
              type='simple'
              onPageChanged={(p) => console.log("SelectedPage:", p)}/>
}

This appears a simple pagination control with 10 pages where the first page is marked as selected. If the total page is less than 6, all page indicators will be shown. Otherwise, Page indicatores will be displyed as spread dots. By clicking on each page indicator, seleted page number will be printed in console.

Properties

You can change the appearance of buttons by settings like:

{
  CustomPreButton: Previous button component,
  CustomNextButton: Next button component,
  CustomDotsButton: Dots button component,
  CustomNumberButton: Page button component,
  CustomSelectedButton: Selected page button component
}

If you want to change appearance of some elements, you should put just those elements in the settings objec. For example if we need to change previous and next buttons, so:

settings: {
  CustomPreButton : MyPreviousButtonComponent,
  CustomNextButton : MyNextBbuttonComponent
}

Custom buttons should have a callback function named 'onClick' that has an input argument

License

MIT © mortezadvlp