React Pagination

{
"name":"Custom pagination",
"section":"What are we using?",
"packages": [
    "react",
    "react-query",
    "react-error-boundary",
    "axios"
    ]'
}

usePagination

import { useMemo } from 'react';
import { getRange } from './helpers/getRange';

// const DOTS = '';

const usePagination = ({
  totalCount,
  pageSize,
  siblingCount = 1,
  currentPage,
}) => {
  const paginationRange = useMemo(() => {
    // case 1 : number of page we want to show is greater than the total number of page
    if (totalPageNumbers > NumberOfPages) {
      ...
    }
    // Left & right sibling indices
    const leftSiblingIndex = currentPage - siblingCount;
    const rightSiblingIndex = currentPage + siblingCount;

    // Should show dots
    const shouldShowLeftDots = leftSiblingIndex > 3;
    const shouldShowRightDots = NumberOfPages - 2 > rightSiblingIndex;

    // case 2 : No left dots to show, but rights dots to be shown
    if (!shouldShowLeftDots && shouldShowRightDots) {
      ...
    }

    // case 3 : No right dots to show,
    if (shouldShowLeftDots && !shouldShowRightDots) {
     ...
    }

    // case 4: Both left & right dots to be shown
    if (shouldShowLeftDots && shouldShowRightDots) {
      ...
    }
  }, [currentPage, pageSize, siblingCount, totalCount]);

  return paginationRange;
};

Prefetch

const queryKeys = new Set();

queries.map((key) => queryKeys.add(key.queryKey[1]));

paginationRange.map((page) => {
  if (page === currentPage || page === 'DOTS' || queryKeys.has(page)) {
    return null;
  }

  return queryClient.prefetchQuery(['photos', page], () =>
    fetchPhotos(page, pageSize)
  );
});

resources :

• https://github.com/mayankshubham/react-pagination/blob/master/src/usePagination.js
• https://react-query.tanstack.com/
• https://www.npmjs.com/package/react-error-boundary