Typescript Support

[MeAkib]

Hi,

Thanks for this amazing project. If you add the TS version or support it would be helpfull.

Thanks

[mayankshubham]

@akib1997 Adding support for Typescript and publishing it as an NPM package is definitely in the plan. I will pick it up soon

Hi,

Thanks for this amazing project. If you add the TS version or support it would be helpfull.

Thanks

[MeAkib]

How much time it'll take? do you have any idea? So, I can wait. I'm facing problem with TS.

[daoodaba975]

How much time it'll take? do you have any idea? So, I can wait. I'm facing problem with TS.

Hello look that could help you : https://www.npmjs.com/package/use-pagination-firestore

[ArmelZy]

How much time it'll take? do you have any idea? So, I can wait. I'm facing problem with TS.

You can also try this one https://dev.to/potouridisio/the-only-pagination-you-ll-ever-need-1-2-3-4-5-4il5

[markphelps]

I know this is outdated but I have an implementation that I converted to TS for the hook:

import { useMemo } from "react";

const range = (start: number, end: number) => {
  const length = end - start + 1;
  /*
  	Create an array of certain length and set the elements within it from
    start value to end value.
  */
  return Array.from({ length }, (_, idx) => idx + start);
};

type usePaginationProps = {
    totalCount : number,
    pageSize : number,
    siblingCount: number,
    currentPage : number
}

const DOTS = "...";

export const usePagination = (props: usePaginationProps) : (number|string)[] => {
  const {totalCount, pageSize, siblingCount, currentPage} = props;
  const paginationRange = useMemo(() => {
    const totalPageCount = Math.ceil(totalCount / pageSize);

    // Pages count is determined as siblingCount + firstPage + lastPage + currentPage + 2*DOTS
    const totalPageNumbers = siblingCount + 5;

    /*
        Case 1:
        If the number of pages is less than the page numbers we want to show in our
        paginationComponent, we return the range [1..totalPageCount]
      */
    if (totalPageNumbers >= totalPageCount) {
      return range(1, totalPageCount);
    }

    /*
          Calculate left and right sibling index and make sure they are within range 1 and totalPageCount
      */
    const leftSiblingIndex = Math.max(currentPage - siblingCount, 1);
    const rightSiblingIndex = Math.min(
      currentPage + siblingCount,
      totalPageCount
    );

    /*
        We do not show dots just when there is just one page number to be inserted between the extremes of sibling and the page limits i.e 1 and totalPageCount. Hence we are using leftSiblingIndex > 2 and rightSiblingIndex < totalPageCount - 2
      */
    const shouldShowLeftDots = leftSiblingIndex > 2;
    const shouldShowRightDots = rightSiblingIndex < totalPageCount - 2;

    const firstPageIndex = 1;
    const lastPageIndex = totalPageCount;

    /*
          Case 2: No left dots to show, but rights dots to be shown
      */
    if (!shouldShowLeftDots && shouldShowRightDots) {
      const leftItemCount = 3 + 2 * siblingCount;
      const leftRange = range(1, leftItemCount);

      return [...leftRange, DOTS, totalPageCount];
    }

    /*
          Case 3: No right dots to show, but left dots to be shown
      */
    if (shouldShowLeftDots && !shouldShowRightDots) {
      const rightItemCount = 3 + 2 * siblingCount;
      const rightRange = range(
        totalPageCount - rightItemCount + 1,
        totalPageCount
      );
      return [firstPageIndex, DOTS, ...rightRange];
    }

    /*
          Case 4: Both left and right dots to be shown
      */
      const middleRange = range(leftSiblingIndex, rightSiblingIndex);
      return [firstPageIndex, DOTS, ...middleRange, DOTS, lastPageIndex];
  }, [totalCount, pageSize, siblingCount, currentPage]);

  return paginationRange;
};