Awesome
DEPRECATED - no longer actively maintained.
Please use GhostUI instead.
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
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>
)
Options
currentPage
Type: number
The value of current page. Required.
totalPage
Type: number
The value of total page. Required.
siblingsSize
Type: number
The items size of one side of the middle of pagination.
boundarySize
Type: number
The items size of one side of the edge of pagination.
Returns (Hooks) | Props (Render Props)
pages
Type: number[]
The page items of the middle of pagination.
currentPage
Type: number
The value of current page.
hasPrev
Type: boolean
Returns true if previous page of the current page is exist.
hasNext
Type: boolean
Returns true if next page of the current page is exist.
getFirstBoundary
Type: () => number[]
Returns page items of first boundary.
getLastBoundary
Type: () => number[]
Returns page items of last boundary.
isPrevTruncated
Type: boolean
Returns true if pages before the current page is ellipsized.
isNextTruncated
Type: boolean
Returns true if pages after the current page is ellipsized.