usePagination

import { usePagination } from "@dwarvesf/react-hooks";

{
  totalPage: number
  pageSize: number
  // initial value, but changing it will update the hook's `currentPage` return value
  page: number
  // go to next page, optionally taking a boolean param to decide whether to go the last page immediately
  next: (toLast?: boolean) => void
  // back to previous page, optionally taking a boolean param to decide whether to go back to page 1 immediately
  back: (toFirst?: boolean) => void
  // jump to a specific page
  go: (page: number) => void
  hasNextPage: boolean
  hasPreviousPage: boolean
}

function Example() {
  const { currentPage, totalPage, next, back, go, hasNextPage, hasPreviousPage } = usePagination({
    pageSize: 2,
    page: 1,
    totalPage: 6
  });
  return (
    <ul style={{listStyleType: 'none'}}>
      <li>Page: {currentPage}</li>
      <li>Total page: {totalPage}</li>
      <li>Has next page: {String(hasNextPage)}</li>
      <li>Has previous page: {String(hasPreviousPage)}</li>
      <li>
        <button onClick={() => next(true)}>go to last page</button>
      </li>
      <li>
        <button onClick={() => back(true)}>go to first page</button>
      </li>
      <li>
        <button onClick={() => next()}>next page</button>
      </li>
      <li>
        <button onClick={() => back()}>previous page</button>
      </li>
    </ul>
  );
}