https://github.com/makotot/paginated
⚛️ React render props component & custom hook for pagination.
https://github.com/makotot/paginated
component headless-components hooks pagination react render-props
Last synced: 8 months ago
JSON representation
⚛️ React render props component & custom hook for pagination.
- Host: GitHub
- URL: https://github.com/makotot/paginated
- Owner: makotot
- License: mit
- Archived: true
- Created: 2021-01-12T17:56:33.000Z (almost 5 years ago)
- Default Branch: master
- Last Pushed: 2021-08-14T16:26:36.000Z (about 4 years ago)
- Last Synced: 2024-10-27T22:30:10.956Z (about 1 year ago)
- Topics: component, headless-components, hooks, pagination, react, render-props
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/@makotot/paginated
- Size: 937 KB
- Stars: 22
- Watchers: 3
- Forks: 1
- Open Issues: 7
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
- awesome-react-components - paginated - React render props & custom hook to build pagination. (UI Components / Paginator)
- awesome-react - paginated - React render props & custom hook to build pagination.  (UI Components / Paginator)
- awesome-react-components - paginated - React render props & custom hook to build pagination. (UI Components / Paginator)
- fucking-awesome-react-components - paginated - React render props & custom hook to build pagination. (UI Components / Paginator)
- awesome-react-components - paginated - React render props & custom hook to build pagination. (UI Components / Paginator)
- awesome-react-components - paginated - React render props & custom hook to build pagination. (UI Components / Paginator)
README
# DEPRECATED - no longer actively maintained.
Please use [GhostUI](https://github.com/makotot/GhostUI) instead.
# Paginated 
[](https://github.com/semantic-release/semantic-release)
> 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](https://github.com/testing-library/react-testing-library)**
- **Small size** - https://bundlephobia.com/result?p=@makotot/paginated
## Install
```sh
npm i @makotot/paginated
```
## Example
- [With Chakra UI](https://codesandbox.io/s/chakra-ui-gtwix)
## Usage
### Render Props
```tsx
import { Paginated } from '@makotot/paginated'
...
return (
{({ pages, currentPage, hasPrev, hasNext, getFirstBoundary, getLastBoundary, isPrevTruncated, isNextTruncated }) => (
{hasPrev() && prev}
{getFirstBoundary().map(boundary => {boundary})}
{isPrevTruncated && ...}
{pages.map(page => {
return page === currentPage ? (
{page}
) : (
{page}
);
})}
{isNextTruncated && ...}
{getLastBoundary().map(boundary => {boundary})}
{hasNext() && next}
)}
)
```
### Hooks
```tsx
import { usePaginated } from '@makotot/paginated'
...
const { pages, currentPage, hasPrev, hasNext, getFirstBoundary, getLastBoundary, isPrevTruncated, isNextTruncated } = usePaginated({ currentPage: 1, totalPage: 10, siblingsSize: 2, boundarySize: 2 });
return (
{hasPrev() && prev}
{getFirstBoundary().map(boundary => {boundary})}
{isPrevTruncated && ...}
{pages.map(page => {
return page === currentPage ? (
{page}
) : (
{page}
);
})}
{isNextTruncated && ...}
{getLastBoundary().map(boundary => {boundary})}
{hasNext() && next}
)
```
## 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.
## Authors
- [makotot](https://github.com/makotot)