https://github.com/chototoss/react-paginating
Simple, lightweight, flexible pagination ReactJS component ⏮⏪1️⃣2️⃣3️⃣⏩⏭
https://github.com/chototoss/react-paginating
cypress flowtype function-as-child paginate pagination pagination-components paginator react reactjs render-prop render-props seo-friendly server-rendering typescript
Last synced: about 2 months ago
JSON representation
Simple, lightweight, flexible pagination ReactJS component ⏮⏪1️⃣2️⃣3️⃣⏩⏭
- Host: GitHub
- URL: https://github.com/chototoss/react-paginating
- Owner: ChoTotOSS
- License: mit
- Created: 2017-11-24T18:22:44.000Z (over 7 years ago)
- Default Branch: main
- Last Pushed: 2023-01-26T23:45:12.000Z (over 2 years ago)
- Last Synced: 2025-03-31T07:08:57.372Z (about 2 months ago)
- Topics: cypress, flowtype, function-as-child, paginate, pagination, pagination-components, paginator, react, reactjs, render-prop, render-props, seo-friendly, server-rendering, typescript
- Language: JavaScript
- Homepage: https://chototoss.github.io/react-paginating/
- Size: 2.18 MB
- Stars: 97
- Watchers: 5
- Forks: 14
- Open Issues: 12
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
# React Paginating
[](https://github.com/ChoTotOSS/react-paginating/actions) [](https://dashboard.cypress.io/#/projects/qncx9e/runs)
[](https://github.com/facebook/jest) [](https://img.shields.io/npm/dm/react-paginating.svg) [](https://codecov.io/gh/ChoTotOSS/react-paginating) [](https://badge.fury.io/js/react-paginating) [](https://github.com/ChoTotOSS/react-paginating/blob/master/LICENSE) [](https://github.com/ChoTotOSS/react-paginating/pulls)
[](https://unpkg.com/[email protected]/dist/) [](https://unpkg.com/[email protected]/dist/) [](https://packagequality.com/#?package=react-paginating)
[](http://packagequality.com/#?package=react-paginating)
## Motivation
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](https://reactjs.org/docs/render-props.html)).
This approach allows you to fully control UI component and behaviours.
> See [the intro blog post](https://medium.com/chotot/introducing-react-paginating-9128f30f1f6b)
## Table content
* [Installation](https://github.com/ChoTotOSS/react-paginating#installation)
* [Usage](https://github.com/ChoTotOSS/react-paginating#usage)
* [Examples](https://github.com/ChoTotOSS/react-paginating#examples)
* [Input Props](https://github.com/ChoTotOSS/react-paginating#input-props)
* [Child callback functions](https://github.com/ChoTotOSS/react-paginating#child-callback-functions)
* [Controlled Props](https://github.com/ChoTotOSS/react-paginating#controlled-props)
* [Alternatives](https://github.com/ChoTotOSS/react-paginating#alternatives)
## Installation
```bash
npm install --save react-paginating
```
or
```bash
yarn add react-paginating
```
## Usage
You can check out the basic demo here:
- Javascript: [https://codesandbox.io/s/z2rr7z23ol](https://codesandbox.io/s/z2rr7z23ol)
- Typescript: [https://codesandbox.io/s/9252p34v8r](https://codesandbox.io/s/9252p34v8r)
- Server-Side Rendering: [https://codesandbox.io/s/vq40kw1yn5](https://codesandbox.io/s/vq40kw1yn5)
```css
.bg-red {
background-color: red;
}
```
```js
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 (
{fruits[currentPage - 1].map(item => - {item}
)}
{({
pages,
currentPage,
hasNextPage,
hasPreviousPage,
previousPage,
nextPage,
totalPages,
getPageItemProps
}) => (
first
{hasPreviousPage && (
{'<'}
)}
{pages.map(page => {
let activePage = null;
if (currentPage === page) {
activePage = { backgroundColor: '#fdce09' };
}
return (
{page}
);
})}
{hasNextPage && (
{'>'}
)}
last
)}
);
}
}
render(, document.getElementById('root'));
```
## Examples
* [withClientSideRendering](https://github.com/ChoTotOSS/react-paginating/tree/hook/examples/withClientSideRendering)
* [withServerSideRendering](https://github.com/ChoTotOSS/react-paginating/tree/hook/examples/withServerSideRendering)
## Input Props
### total
> `number`
Total results
### className
> `string`
Customizable style for pagination wrapper
### limit
> `number`
Number of results per page
### pageCount
> `number`
How many pages number you want to display in pagination zone.
### currentPage
> `number`
Current page number
## Child callback functions
### getPageItemProps
> `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**).
## Controlled Props
### pages
> `array: [number]`
List of pages number will be displayed. E.g: [1, 2, 3, 4, 5]
### currentPage
> `number`
### previousPage
> `number`
### nextPage
> `number`
### totalPages
> `number`
### hasNextPage
> `boolean`
Check if it has `next page` or not.
### hasPreviousPage
> `boolean`
Check if it has `previous page` or not.
## Alternatives
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:
* [react-paginate](https://github.com/AdeleD/react-paginate)
## Contributors
