React-use-paginator NPM

usePaginator React Hook

Declarative Pagination.

A simple yet configurable react hook for pagination. No dependencies. Functionally developed.

usePaginator allows the rapid development of paginated views that are light and performant. Just as easy as it is to get started, there are also plenty of customization options should you require them.

Demos

Handful of usage demos can be found on the usage guide.

Install

npm install --save react-use-paginator

Usage

import React from 'react';
import usePaginator from 'react-use-paginator';

const Page = ({ items, index }) => {
  return (
    <div>
      <div>This is page {index}</div>
      <div>It contains the following items:</div>
      {items.map((item) => (
        <div>{item}</div>
      ))}
    </div>
  );
};

const App = () => {
  const data = ['Foo1', 'Bar1', 'Foo2', 'Bar2', 'Foo3', 'Bar3', 'Foo4', 'Bar4'];
  const { Component, nextPage, prevPage } = usePaginator({
    PageComponent: Page,
    maxPerPage: 5,
    data,
  });

  return (
    <div>
      <Button onClick={prevPage}>Prev</Button>
      <Button onClick={nextPage}>Next</Button>
      <Component />
    </div>
  );
};

Input Arguments

const input = {...}
const output = usePaginator(input)

Option	Type	Description
`PageComponent`	Functional component with signature: `(props) => <div/>`	A react component to be used in rendering specific page contents. Component will receive `index` and `items` as input props in addition to any props you specify when rendering the output Component
`data`	Array	Input data that needs to be paginated. The hook will split the data into `items` per page made available to the `PageComponent`
`maxPerPage`	Number	Default: `25`. Optional to be set. Will split the input `data` into as many pages as there is data. Ex: 80 items in `data` would have 4 total pages to render. 3 pages of 25 items and a last page of 5 items

Output Values

The output of the hook is an array of values to use in order to render your component exactly how you need it.

const { ...output } = usePaginator(input);

Option	Type	Description
`currentPage`	Number	The current page index being shown. Starts at `1`.
`Component`	React Component	This is the input `PageComponent` with a specific page's `items` made available through props. Simply render with `<Component />` anywhere on your page.
`hasNextPage`	Boolean	Either true or false depending if there is another page to render
`onNextPage` Alias: `nextPage`	Function signature `() => {...}`	Set the page index directly to the next page. A shortcut to prop into most buttons simply with `onClick={nextPage}`. This function will automatically roll around to page 1 when called on the last page of results.
`onPrevPage` Alias: `prevPage`	Function signature `() => {...}`	Set the page index directly to the previous page. A shortcut to prop into most buttons simply with `onClick={prevPage}`. This function will automatically roll around to the last page when called on the first page of results.
`pageItems`	Array	The items from the input data currently being rendered
`setPageIndex`	Function signature `(index) => {...}`	Set the page index directly for use cases where you need to traverse directly to certain pages. This "index" value starts at `1` because all pages do as well. No numbers less than 1 are acceptable
`totalPages`	Number	The total number of pages. Essentially this is the ceiling integer value of: `data.length` / `maxPerPage`. But why calculate that yourself when the hook has it available already?