https://github.com/asplunds/use-paginate

React pagination hook. Create pagination in your React app
https://github.com/asplunds/use-paginate

Last synced: 4 months ago
JSON representation

React pagination hook. Create pagination in your React app

• Host: GitHub
• URL: https://github.com/asplunds/use-paginate
• Owner: asplunds
• Created: 2023-02-07T10:30:03.000Z (over 2 years ago)
• Default Branch: main
• Last Pushed: 2023-02-07T10:38:45.000Z (over 2 years ago)
• Last Synced: 2025-02-13T08:52:31.966Z (4 months ago)
• Language: TypeScript
• Size: 37.1 KB
• Stars: 1
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# React pagination

A simple React hook for creating pagination systems

This package makes no assumptions about your styling or ui, it works in React native as well.

## Installation

```sh

npm i pagination-hook

```

## Usage

```tsx

function Component() {

  const items = [1, 2, 3, 4, 5]; // use your own items

  // You're in control of the current page

  const [currentPage, setCurrentPage] = useState(0);

  const { startIndex, endIndex, hasPreviousPage, hasNextPage } = usePagination({

    pageSize: 3, // number of items per page

    currentPage,

    itemCount: items.length,

  });

  // Example controls

  return (

    <>

       setCurrentPage((p) => p - 1)}

      >

        prev

      

      
Current Page: {currentPage + 1}

       setCurrentPage((p) => p + 1)}

      >

        next

      


      {items.slice(startIndex, endIndex).map((v) => (

        
item: {v}

      ))}

    >

  );

}

```