...

Headless react hook for pagination

Demo

Arrows only

Numbers only

Arrows and numbers

Infinity

Install

npm install @lucasmogari/react-pagination --save
# or 
yarn add @lucasmogari/react-pagination

Usage

// item = unit that is paginated
// page = group of items
// page item = a pagination element (can be a page number or a gap)


import usePagination from '@lucasmogari/react-pagination';


// INPUT:

const pagination = usePagination({
  totalItems,           // [1, Infinity]
  page,                 // [1, totalPages] - default 1
  itemsPerPage,         // [1, Infinity] - default 24
  maxPageItems,         // [1, Infinity] - default 7
  numbers,              // default true
  arrows,               // default true
  getPageItemProps,     // function that resolves any props for a page item (will return in the props from getPageItem())
});


// OUTPUT:

// Variables:
const {
  page,                 // current page
  totalPages,           // total number of pages
  fromItem,             // first item of the page
  toItem,               // last item of the page
  size,                 // size of the pagination, considering arrows and numbers
  numbers,              // show numbers
  arrows,               // show arrows
  totalItems,           // valid total number of items
  itemsPerPage,         // valid number of items per page
  maxPageItems,         // valid maximum number of page items
} = pagination;

// Functions:
const {
  getPageItem(page ITEM | 'previous' | 'next'),     // returns information about the page item (see below)
  goTo(page NUMBER | 'previous' | 'next'),          // go to a specific page
  previous(),                                       // go to the previous page
  next(),                                           // go to the next page
  setTotalItems(totalItems),                        // update the total number of items
  setItemsPerPage(itemsPerPage),                    // update the number of items per page
  setMaxPageItems(maxPageItems),                    // update the maximum number of page items
} = pagination;

// getPageItem
const {
  page,                 // the page correspondent to the page item
  props,                // component props
  disabled,             // indicate if the page item is disabled
  current,              // indicate if the page item is the current page
} = getPageItem(page ITEM);

Example

Loading CodeSandbox...