https://github.com/fabionmoraes/page-offset-react
A Lib faz a paginação utilizando o retorno da API via offset.
https://github.com/fabionmoraes/page-offset-react
nodejs paginate react reactjs
Last synced: 3 months ago
JSON representation
A Lib faz a paginação utilizando o retorno da API via offset.
- Host: GitHub
- URL: https://github.com/fabionmoraes/page-offset-react
- Owner: fabionmoraes
- Created: 2022-02-05T17:01:48.000Z (over 3 years ago)
- Default Branch: master
- Last Pushed: 2022-02-17T17:17:05.000Z (over 3 years ago)
- Last Synced: 2025-05-29T15:17:35.284Z (4 months ago)
- Topics: nodejs, paginate, react, reactjs
- Language: JavaScript
- Homepage: https://www.npmjs.com/package/page-offset-react
- Size: 80.1 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# page-offset-react - React JS
## O que a lib faz?
- A Lib faz a paginação utilizando o retorno da API via offset.
- Dessa forma deixa mais fácil para o backend apenas retornar OFFSET - TOTAL - LIMIT
## Para utilizar precisa?
- API precisa ter o retorno
```TS
// {
// "data": {
// "offset": 0,
// "limit": 20,
// "total": 1559,
// ...
// }
// }
```
## Instalação
```bash
yarn add page-offset-react
# or
npm i page-offset-react --save
```
## Funcionalidades
### Page
```tsx
...
import { IPageNextOrPrev, Page } from 'page-offset-react'
const App: React.FC = () => {
const handleNextOrPrev = (values: IPageNextOrPrev) => {
// values: {
// page: string
// params: string
// }
}
const handlePage = (event: string) => {
...
}
return(
)
}
```
### FromToTotal
```tsx
...
import { FromToTotal } from 'page-offset-react'
const App: React.FC = () => {
return(
// retorno from 1 to 1555
)
}
```
### offset
```tsx
...
import { offset } from 'page-offset-react'
const App: React.FC = () => {
const handleApi = async ({ page, limit }: ...) => {
const response = await api.get(`characters`, {
params: {
offset: offset({ page, limit }),
limit: Number(limit),
},
})
}
// 1 2...4 5 6 7 8...130 Prev Next - retorno para html
return(
...
)
}
```
### resultPaginate
```tsx
...
import { resultPaginate } from 'page-offset-react';
const App: React.FC = () => {
const paginate = resultPaginate({
paginate: {
limit: data.limit,
offset: data.offset,
total: data.total,
},
page: 1, //Página atual navegando
minNumber: 5, // Por default é 5 - Total de página que mostra array pages: [...]
});
// paginate: {
// currentPage: 1
// endIndex: 14 // QTD Final de Quantidade TO
// endPage: 5 // Página Final
// pageSize: 15 // Limit de pesquisa
// pages: (5) [1, 2, 3, 4, 5]
// startIndex: 0 // QTD de início FROM
// startPage: 1 //
// totalItems: 269 // Total
// totalPages: 18 / Total de paginas
// }
return(...)
}
```