ama-use-cookis

@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