https://github.com/itsfaqih/usepagination

Simple client side pagination hooks for react
https://github.com/itsfaqih/usepagination

client-side client-side-pagination pagination pagination-hooks react react-hooks usepagination

Last synced: 9 days ago
JSON representation

Simple client side pagination hooks for react

• Host: GitHub
• URL: https://github.com/itsfaqih/usepagination
• Owner: itsfaqih
• Created: 2020-10-18T06:25:15.000Z (about 4 years ago)
• Default Branch: main
• Last Pushed: 2020-10-19T17:58:28.000Z (about 4 years ago)
• Last Synced: 2024-11-08T04:23:01.956Z (13 days ago)
• Topics: client-side, client-side-pagination, pagination, pagination-hooks, react, react-hooks, usepagination
• Language: TypeScript
• Homepage: https://itsfaqih.github.io/usepagination
• Size: 372 KB
• Stars: 11
• Watchers: 1
• Forks: 3
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# usePagination

Simple client side pagination hooks for react.

[![NPM](https://img.shields.io/npm/v/@itsfaqih/usepagination.svg)](https://www.npmjs.com/package/@itsfaqih/usepagination)

## Install

```bash

npm install --save @itsfaqih/usepagination

```

## Usage

```tsx

import React from 'react';

import Post from 'component/post';

import Pagination from 'component/pagination';

import usePagination from '@itsfaqih/usepagination';

const Home = () => {

  const posts = [

    {

      id: 1,

      title: 'Nice hooks',

      body: 'You can also use data from an API. As long as it returns an array',

    },

    ...

  ];

  const { page, action } = usePagination(posts);

  return (

    


      
Posts

      


        {page.data.map(item => )}

      

      


        

           action.goTo(1)}

            disabled={page.current === 1}

          />

          

          {page.numbers.map((number, index) => (

             action.goTo(number)}

              disabled={page.current === number}

            />

          ))}

          

           action.goTo(page.last)}

            disabled={page.current === page.last}

          />

        

      

    

  );

};

```


## API

```tsx

const { page, action } = usePagination(initialData, perPage, shownPageNumber);

```

### `parameters`

| Parameter       | Type   | Description                                        |

| --------------- | ------ | -------------------------------------------------- |

| initialData     | Array  | The array of the data to be paginated              |

| perPage         | number | Number of data to be shown per page                |

| shownPageNumber | number | Amount of number to be shown in pagination buttons |

### `page`

| Property | Type           | Description                                                                     |

| -------- | -------------- | ------------------------------------------------------------------------------- |

| data     | Array          | Data of current active page                                                     |

| numbers  | Array          | Generated page numbers for pagination buttons                                   |

| current  | number \| null | Current active page number. It will be null on empty initialData                |

| next     | number \| null | Next page number. It will be null on empty initialData or no more next page     |

| previous | number \| null | Previous page number. It will be null on empty initialData or active first page |

| last     | number         | Last page number. It will be 0 on empty initialData                             |

### `action`

| Property | Type     | Argument | Description                 |

| -------- | -------- | :------: | --------------------------- |

| next     | Function |    -     | Change to the next page     |

| previous | Function |    -     | Change to the previous page |

| goTo     | Function |  number  | Change to specified page    |

## License

MIT © [itsfaqih](https://github.com/itsfaqih)

---

This hook is created using [create-react-hook](https://github.com/hermanya/create-react-hook).