usePagination

Simple client side pagination hooks for react.

Install

npm install --save @itsfaqih/usepagination

Usage

import React from 'react';
import Post from 'component/post';
import Pagination from 'component/pagination';
import usePagination from '@itsfaqih/usepagination';

const Home = () => {
  const posts = [
    {
      id: 1,
      title: 'Nice hooks',
      body: 'You can also use data from an API. As long as it returns an array',
    },
    ...
  ];

  const { page, action } = usePagination(posts);

  return (
    <div>
      <h1>Posts</h1>
      <div>
        {page.data.map(item => <Post.Card data={item}>)}
      </div>
      <div>
        <Pagination>
          <Pagination.First
            onClick={() => action.goTo(1)}
            disabled={page.current === 1}
          />
          <Pagination.Previous
            onClick={action.previous}
            disabled={page.previous === null}
          />
          {page.numbers.map((number, index) => (
            <Pagination.Number
              key={index}
              number={number}
              onClick={() => action.goTo(number)}
              disabled={page.current === number}
            />
          ))}
          <Pagination.Next
            onClick={action.next}
            disabled={page.next === null}
          />
          <Pagination.Last
            onClick={() => action.goTo(page.last)}
            disabled={page.current === page.last}
          />
        </Pagination>
      </div>
    </div>
  );
};

API

const { page, action } = usePagination(initialData, perPage, shownPageNumber);

parameters

Parameter	Type	Description
initialData	Array	The array of the data to be paginated
perPage	number	Number of data to be shown per page
shownPageNumber	number	Amount of number to be shown in pagination buttons

page

Property	Type	Description
data	Array	Data of current active page
numbers	Array	Generated page numbers for pagination buttons
current	number | null	Current active page number. It will be null on empty initialData
next	number | null	Next page number. It will be null on empty initialData or no more next page
previous	number | null	Previous page number. It will be null on empty initialData or active first page
last	number	Last page number. It will be 0 on empty initialData

action

Property	Type	Argument	Description
next	Function	-	Change to the next page
previous	Function	-	Change to the previous page
goTo	Function	number	Change to specified page

License

MIT © itsfaqih

---

This hook is created using create-react-hook.