1.0.9 • Published 3 years ago
ama-use-cookis v1.0.9
@meksiabdou/usepagination
A custom React Hook for pagination
.
Installation
$ npm i @meksiabdou/usepagination
or
$ yarn add @meksiabdou/usepagination
Usage
Here is a basic setup.
import usePagination from '@meksiabdou/usepagination';
Parameters
Name | Type | Default Value |
---|---|---|
url | String | none |
query | Object | {} |
count | Number | 10 |
page | Number | 1 |
onPageChange | Function | null |
headers | Object | {} |
Return
Name | Type | description |
---|---|---|
data | Object | The data is retrieved from api |
page | Number | Page number |
setPage | Function | Set page number |
paginate | Function | Function form pagination |
loading | Boolean | Loading |
moreLoading | Boolean | Loading on call paginate |
pageCount | Number | number of pages |
Example
import React, { useState } from 'react';
import usePagination from '@meksiabdou/usepagination';
const Stores = () => {
const url = "http://example.com/api/stores";
const query = {active : 1};
const count = 10;
const currentPage = 1;
const onPageChange = (p) => {
window.history.pushState(
{},
null,
`${window.location.origin}/#${pathname}?p=${p}`
);
};
headers = {token : "mytoken"};
const {
page,
setPage,
data,
loading,
more,
pageCount,
paginate,
} = usePagination({
url : url,
query : query,
responseKeys: responseKeys,
count: count,
page : currentPage,
onPageChange: onPageChange,
headers : headers,
});
return (<div>
{
data.map((item, index) => {
return <p key={index}>{item.name}</p>
})
}
<button onclick={paginate}>more - page {page} / {pageCount}</button>
</div>);
}
export default Stores;
Request
http://example.com/api/stores?limit=10&offset&active=1
Response
Output with status 200 OK
:
{
"results" : {
"count_all" : 150,
"data" : [
{
"id" : 1,
"name" : "aliexpress",
},
{
"id" : 2,
"name" : "bengood",
},
{
"id" : 3,
"name" : "Gearbest",
},
...
],
},
"status" : true,
}
Live demo
You can view/edit the sample code above on CodeSandbox.
License
MIT Licensed
1.0.9
3 years ago