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: 2 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 (over 3 years ago)
• Default Branch: master
• Last Pushed: 2021-08-14T16:26:36.000Z (almost 3 years ago)
• Last Synced: 2024-04-09T21:47:33.292Z (3 months ago)
• Topics: component, headless-components, hooks, pagination, react, render-props
• Language: TypeScript
• Homepage: https://www.npmjs.com/package/@makotot/paginated
• Size: 937 KB
• Stars: 21
• Watchers: 3
• Forks: 1
• Open Issues: 7
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Lists

• 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)
• 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)
• 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)
• fucking-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 ![CI](https://github.com/makotot/paginated/workflows/CI/badge.svg?branch=master)

![npm](https://img.shields.io/npm/v/@makotot/paginated?style=for-the-badge)

![NPM](https://img.shields.io/npm/l/@makotot/paginated?style=for-the-badge)

![npm bundle size](https://img.shields.io/bundlephobia/min/@makotot/paginated?style=for-the-badge)

![npm bundle size](https://img.shields.io/bundlephobia/minzip/@makotot/paginated?style=for-the-badge)

![GitHub contributors](https://img.shields.io/github/contributors/makotot/paginated?style=for-the-badge)

[![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg?style=for-the-badge)](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)