https://github.com/careerday-jobs/react-paginator
Simple and easy-to-use pagination library for React
https://github.com/careerday-jobs/react-paginator
pagination paginator react
Last synced: 6 months ago
JSON representation
Simple and easy-to-use pagination library for React
- Host: GitHub
- URL: https://github.com/careerday-jobs/react-paginator
- Owner: careerday-jobs
- License: mit
- Created: 2022-09-23T08:15:33.000Z (about 3 years ago)
- Default Branch: main
- Last Pushed: 2023-08-10T06:11:25.000Z (about 2 years ago)
- Last Synced: 2025-04-14T23:15:36.348Z (6 months ago)
- Topics: pagination, paginator, react
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/@careerday-jobs/react-paginator
- Size: 93.8 KB
- Stars: 3
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
react-paginator
Simple and easy-to-use pagination library for React
[](https://www.npmjs.com/package/@careerday-jobs/react-paginator)
[](https://www.npmjs.com/package/@careerday-jobs/react-paginator)
[](https://careerday.jobs)
## 📚 Why react-paginator?
Every web developer should work on pagination at some point. We were using React.js,
and surprised by the fact that there is no single package we'd like to just install and start using.
If you're using React and going to work on pagination, then *react-paginator* is a worth trying.
## 🖥 Screenshots
#### Mobile
#### Desktop
## 📦 Installation
```bash
npm install @careerday-jobs/react-paginator
```
## 🪄 Basic Usage
```tsx
// import at the top of file
import { PaginatedParam, usePaginated, PaginatedCommander } from '@careerday-jobs/node-paginator';
// In a React component.
const SampleComponent = () => {
// 1. Call usePaginated(). Give page size and selectablePageNumberRange.
const [paginated, setPaginated, drawPaginated, selectablePageNums] = usePaginated(10, 5);
// 2. Return component
return (
<>
{
const apiResponse = await axios.get('https://myawesomehomepage.com/showitems?page=' + page);
const totalItemCount = parseInt(apiResponse.data.totalItemCount);
// 3. Call drawPaginated() everytime page changes.
const paginatedParam = new PaginatedParam(
1, // pageNo
10, // pageSize
totalItemCount, // totalItemCount
5 // selectablePageNumberRange
);
drawPaginated(paginatedParam);
}}
/>
>
);
}
```
## 🪄 Parameters
### usePaginated()
* **pageSize** ```number```
The size of each page.
* **selectablePageNumberRange** ```number```
The range of page numbers you can see.
For example, if selectablePageNumberRange is 5,
you will see page numbers like 1, 2, 3, 4, 5 when you're on the 1st page.
And you will see 6, 7, 8, 9, 10 when you're on the 7th page.
### PaginatedParam
PaginatedParam constructor requires four parameters like below.
* **pageNo** ```number```
Current page number.
* **pageSize** ```number```
* **totalItemCount** ```number```
The number of whole items.
* **selectablePageNumberRange** ```number```
### PaginatedCommander (React component)
PaginatedCommander component requires four parameters like below.
* **paginated**
paginated variable you got from usePaginated()
* **setPaginated**
setPaginated variable you got from usePaginated()
* **selectablePageNums**
selectablePageNums variable you got from usePaginated()
* **dataFetchFunction**
The callback you want to use to fetch data.
Please note that you should call drawPaginated() function
after data gets prepared.
* **locale**
For now there are only two locales are supported: 'en' and 'ko'.
## 🖼️ Styling
Styling can be achieved by just importing css file provided. CDN version will be provided in the future.
```css
/* Example */
@import '@careerday-jobs/react-paginator/lib/paginated.css';
```
## ⏳ Pagination Library On Backend
Looking for a library which supports pagination on backend? Why don't you check out [node-paginator](https://www.npmjs.com/package/@careerday-jobs/node-paginator)?
It's way more efficient when you try both packages!
## 👨👩 Contributors
[//]: contributor-faces
## 🔑 License
[MIT](https://github.com/careerday-jobs/react-paginator/LICENSE) @ 2022 CareerDay
