During development, we were facing problems supporting server-rendering of our web app & SEO (require pagination links). To solve that, we had to add 2 snippets of code, one to support the server-side and another to support the client-side which lead to being hard for maintenance. Most of the pagination libraries only support client-rendering by attaching event handlers on the pagination button to redirect. Because of that, we created this library which allows flexibly to customize behaviors (attaching event handlers or href attribute) and user interface.
The component applied Render Props pattern. (You can read more
about this pattern
here).
This approach allows you to fully control UI component and behaviours.
npm install --save react-paginatingor
yarn add react-paginatingYou can check out the basic demo here:
- Javascript: https://codesandbox.io/s/z2rr7z23ol
- Typescript: https://codesandbox.io/s/9252p34v8r
- Server-Side Rendering: https://codesandbox.io/s/vq40kw1yn5
.bg-red {
background-color: red;
}import React from 'react';
import { render } from 'react-dom';
import Pagination from 'react-paginating';
const fruits = [
['apple', 'orange'],
['banana', 'avocado'],
['coconut', 'blueberry'],
['payaya', 'peach'],
['pear', 'plum']
];
const limit = 2;
const pageCount = 3;
const total = fruits.length * limit;
class App extends React.Component {
constructor() {
super();
this.state = {
currentPage: 1
};
}
handlePageChange = (page, e) => {
this.setState({
currentPage: page
});
};
render() {
const { currentPage } = this.state;
return (
<div>
<ul>
{fruits[currentPage - 1].map(item => <li key={item}>{item}</li>)}
</ul>
<Pagination
className="bg-red"
total={total}
limit={limit}
pageCount={pageCount}
currentPage={currentPage}
>
{({
pages,
currentPage,
hasNextPage,
hasPreviousPage,
previousPage,
nextPage,
totalPages,
getPageItemProps
}) => (
<div>
<button
{...getPageItemProps({
pageValue: 1,
onPageChange: this.handlePageChange
})}
>
first
</button>
{hasPreviousPage && (
<button
{...getPageItemProps({
pageValue: previousPage,
onPageChange: this.handlePageChange
})}
>
{'<'}
</button>
)}
{pages.map(page => {
let activePage = null;
if (currentPage === page) {
activePage = { backgroundColor: '#fdce09' };
}
return (
<button
{...getPageItemProps({
pageValue: page,
key: page,
style: activePage,
onPageChange: this.handlePageChange
})}
>
{page}
</button>
);
})}
{hasNextPage && (
<button
{...getPageItemProps({
pageValue: nextPage,
onPageChange: this.handlePageChange
})}
>
{'>'}
</button>
)}
<button
{...getPageItemProps({
pageValue: totalPages,
onPageChange: this.handlePageChange
})}
>
last
</button>
</div>
)}
</Pagination>
</div>
);
}
}
render(<App />, document.getElementById('root'));
number
Total results
string
Customizable style for pagination wrapper
number
Number of results per page
number
How many pages number you want to display in pagination zone.
number
Current page number
function({ pageValue: number, onPageChange: func })
Allow to pass props and event to page item. When page is clicked, onPageChange
will be executed with param value pageValue.
Note: This callback function should only use for paging with state change.
If you prefer parsing page value from query url (Please don't use this
callback function).
array: [number]
List of pages number will be displayed. E.g: [1, 2, 3, 4, 5]
number
number
number
number
boolean
Check if it has next page or not.
boolean
Check if it has previous page or not.
If you don’t agree with the choices made in this project, you might want to explore alternatives with different tradeoffs. Some of the more popular and actively maintained ones are:
Dzung Nguyen 📖 💻 🤔 👀 🐛 |
Chau Tran 💻 🤔 👀 🐛 |
Faris Abusada 💻 🐛 |
