@makotot/paginated NPM

Paginated

React render props & custom hook for pagination.

Features

Headless component - There are no restrictions on the ui expression.
Style free - This lib only care about functionality of pagination.
Tested with RTL
Small size - https://bundlephobia.com/result?p=@makotot/paginated

Install

npm i @makotot/paginated

Example

With Chakra UI

Usage

Render Props

import { Paginated } from '@makotot/paginated'

...

return (
  <Paginated currentPage={1} totalPage={10} siblingsSize={2} boundarySize={2}>
    {({ pages, currentPage, hasPrev, hasNext, getFirstBoundary, getLastBoundary, isPrevTruncated, isNextTruncated }) => (
      <div>
        {hasPrev() && <a href="#">prev</a>}
        {getFirstBoundary().map(boundary => <a href="#" key={boundary}>{boundary}</a>)}
        {isPrevTruncated && <span>...</span>}
        {pages.map(page => {
          return page === currentPage ? (
            <span key={page}>{page}</span>
          ) : (
            <a href="#" key={page}>{page}</a>
          );
        })}
        {isNextTruncated && <span>...</span>}
        {getLastBoundary().map(boundary => <a href="#" key={boundary}>{boundary}</a>)}
        {hasNext() && <a href="#">next</a>}
      </div>
    )}
  </Paginated>
)

Hooks

import { usePaginated } from '@makotot/paginated'

...

const { pages, currentPage, hasPrev, hasNext, getFirstBoundary, getLastBoundary, isPrevTruncated, isNextTruncated } = usePaginated({ currentPage: 1, totalPage: 10, siblingsSize: 2, boundarySize: 2 });

return (
  <div>
    {hasPrev() && <a href="#">prev</a>}
    {getFirstBoundary().map(boundary => <a href="#" key={boundary}>{boundary}</a>)}
    {isPrevTruncated && <span>...</span>}
    {pages.map(page => {
      return page === currentPage ? (
        <span key={page}>{page}</span>
      ) : (
        <a href="#" key={page}>{page}</a>
      );
    })}
    {isNextTruncated && <span>...</span>}
    {getLastBoundary().map(boundary => <a href="#" key={boundary}>{boundary}</a>)}
    {hasNext() && <a href="#">next</a>}
  </div>
)