sunt aut facere repellat provident occaecati excepturi optio reprehenderit

1

quia et suscipit suscipit recusandae consequuntur expedita et cum reprehenderit molestiae ut ut quas totam nostrum rerum est autem sunt rem eveniet architecto

qui est esse

1

est rerum tempore vitae sequi sint nihil reprehenderit dolor beatae ea dolores neque fugiat blanditiis voluptate porro vel nihil molestiae ut reiciendis qui aperiam non debitis possimus qui neque nisi nulla

ea molestias quasi exercitationem repellat qui ipsa sit aut

1

et iusto sed quo iure voluptatem occaecati omnis eligendi aut ad voluptatem doloribus vel accusantium quis pariatur molestiae porro eius odio et labore et velit aut

eum et est occaecati

1

ullam et saepe reiciendis voluptatem adipisci sit amet autem assumenda provident rerum culpa quis hic commodi nesciunt rem tenetur doloremque ipsam iure quis sunt voluptatem rerum illo velit

nesciunt quas odio

1

repudiandae veniam quaerat sunt sed alias aut fugiat sit autem sed est voluptatem omnis possimus esse voluptatibus quis est aut tenetur dolor neque

dolorem eum magni eos aperiam quia

1

ut aspernatur corporis harum nihil quis provident sequi mollitia nobis aliquid molestiae perspiciatis et ea nemo ab reprehenderit accusantium quas voluptate dolores velit et doloremque molestiae

magnam facilis autem

1

dolore placeat quibusdam ea quo vitae magni quis enim qui quis quo nemo aut saepe quidem repellat excepturi ut quia sunt ut sequi eos ea sed quas

dolorem dolore est ipsam

1

dignissimos aperiam dolorem qui eum facilis quibusdam animi sint suscipit qui sint possimus cum quaerat magni maiores excepturi ipsam ut commodi dolor voluptatum modi aut vitae

nesciunt iure omnis dolorem tempora et accusantium

1

consectetur animi nesciunt iure dolore enim quia ad veniam autem ut quam aut nobis et est aut quod aut provident voluptas autem voluptas

optio molestias id quia eum

1

quo et expedita modi cum officia vel magni doloribus qui repudiandae vero nisi sit quos veniam quod sed accusamus veritatis error

Pagination

In this component there are 3 main concept:

  • usePagination hooks
  • Rendered Data
  • Pagination Navigation

usePagination

I passed the data to the usePagination by calling it like this:

const { pagination, currentPage, setCurrentPage } = usePagination(posts);

tsx

NOTE: my beloved fellows can see posts example here, Github

params:

  • deps: Array<T>
  • dataCountPerPage: number

Rendered Data

the current data of active page can be accessed in

const { pagination, currentPage, setCurrentPage } = usePagination(posts);
pagination.currentData; // show list of current data

tsx

here is an example how to render it

<div className='prose flex w-full flex-col gap-4 p-4'>
  {pagination.currentData &&
    pagination.currentData.map((postItem, postIndex) => (
      <div
        className='w-full rounded-lg bg-white p-4 shadow-md'
        key={`${postIndex}-${postItem.id}`}
      >
        <div className='grid w-full grid-cols-2'>
          <h6 className='font-semibold'>{postItem.title}</h6>
          <p className='text-end text-xs'>{postItem.userId}</p>
        </div>
        <p>{postItem.body}</p>
      </div>
    ))}
</div>

tsx

Pagination Navigation

The navigation actually really simple. We can iterate from -2 to +2 from the current page and show these pages as options and add an arrow button to step back or step forward

<PaginationNavigation
  pagination={pagination}
  currentPage={currentPage}
  setCurrentPage={setCurrentPage}
/>

tsx

In this component I created a navigation that accept all the usePagination returned value. Maybe next time I will create a context provider so the usePagination values does not need to be passed to the pagination navigation.