Functional page navigation bar for react
npm install react-pagination-barLightweight component for pagination of application pages on react
- Customizing class names without using style overrides
- Multiple pagination display modes.
- Accessible. React Pagination Bar follow the WAI-ARIA guidelines specifications.
and have the right aria-* attributes.
- Lightweight :P
Install the library using one of these commands:
``sh
$ npm i react-pagination-bar
$ yarn add react-pagination-bar
`
To start using the library, add import Pagination and place the component in your code.
If you are not going to customize the styles of the component, don't forget to add the default styles:
`jsx`
import 'react-pagination-bar/dist/index.css'
Simple usage without react-router-dom:
`jsx
import { Pagination } from "react-pagination-bar"
import 'react-pagination-bar/dist/index.css'
const posts = [
{ id: 1, title: 'Post 1' },
{ id: 2, title: 'Post 2' },
{ id: 3, title: 'Post 3' },
{ id: 4, title: 'Post 4' },
{ id: 5, title: 'Post 5' },
{ id: 6, title: 'Post 6' },
{ id: 7, title: 'Post 7' },
{ id: 8, title: 'Post 8' },
{ id: 9, title: 'Post 9' },
{ id: 10, title: 'Post 10' },
{ id: 11, title: 'Post 11' },
{ id: 12, title: 'Post 12' },
];
export const App = () => {
const [currentPage, setCurrentPage] = useState(1);
const pagePostsLimit = 3;
return (
| Prop name | Type | Default value | Description | Required |
|---|---|---|---|---|
| totalItems | Number | None | Total number of items on the server. | Yes |
| onPageChange | ((pageNumber: number) => void) | None | Callback triggered on page change. | Yes |
| currentPage | Number | 1 | Page number to be shown first. Be sure to synchronize the value with the server if you work with routing! | Yes |
| itemsPerPage | Number | 10 | The number of items to display on your page. Be sure to synchronize the value with the server if you work with routing! | Yes |
| startLabel | String | '<<' | The text of the button that sends to the first page. | No |
| endLabel | String | '>>' | The text of the button that sends to the last page. | No |
| prevLabel | String | '<' | The text of the button that sends to the previous page. | No |
| nextLabel | String | '>' | The text of the button that sends to the next page. | No |
| pageNeighbours | Number | 4 | The number of pages displayed next to the currently selected. | No |
| withProgressBar | Boolean | false | Shows the progress bar under pagination. | No |
| onlyPageNumbers | Boolean | false | Removes buttons and leaves only pages. | No |
| onlyPaginationButtons | Boolean | false | Removes pages leaves only buttons. | No |
| withGoToInput | Boolean | false | Shows the input field to go to the page. | No |
| customClassNames | Object | Take a look at the example with component customization | Replaces default class names. | No |
Coming soon...
MIT © Ilya Sokol