diff --git a/packages/react-pagination/hooks/usePagination.test.ts b/packages/react-pagination/hooks/usePagination.test.ts index 8178509d..a30ee619 100644 --- a/packages/react-pagination/hooks/usePagination.test.ts +++ b/packages/react-pagination/hooks/usePagination.test.ts @@ -60,6 +60,27 @@ describe("usePagination ", () => { expect(result.current.page).toBe(1); }); + + it("should handle siblings on mobile", () => { + const { result } = renderHook(() => + usePagination({ + pages: 20, + initialPage: 1, + siblings: 1, + boundaries: 1, + isMobile: true, + }), + ); + + expect(result.current.range).toEqual([[1, 2, 3], [20]]); + + act(() => { + result.current.setPage(2); + }); + + // // The layout of the segments should still be the same. + expect(result.current.range).toEqual([[1, 2, 3], [20]]); + }); }); describe("Array-based pagination", () => { diff --git a/packages/react-pagination/hooks/usePagination.ts b/packages/react-pagination/hooks/usePagination.ts index 2c06a8a1..28d02d7b 100644 --- a/packages/react-pagination/hooks/usePagination.ts +++ b/packages/react-pagination/hooks/usePagination.ts @@ -20,6 +20,7 @@ interface UsePaginationBaseProps { boundaries: number; gapSize?: number; + isMobile?: boolean; } export interface UsePaginationWithPagesProps extends UsePaginationBaseProps { @@ -103,10 +104,12 @@ export function usePagination( const { boundaries = 1, siblings = 1, gapSize = 1 } = props; + const responsiveSiblings = props.isMobile ? 0 : siblings; + const range = useMemo(() => { const segments: [number[], number[], number[]] = [ boundaries ? clampedSequence(1, boundaries) : [], - clampedSequence(page - siblings, page + siblings), + clampedSequence(page - responsiveSiblings, page + responsiveSiblings), boundaries ? clampedSequence(computedPages + 1 - boundaries, computedPages) : [], @@ -115,11 +118,18 @@ export function usePagination( return formatSegments( segments, computedPages, - siblings, + responsiveSiblings, boundaries, gapSize, ); - }, [page, boundaries, siblings, clampedSequence, computedPages, gapSize]); + }, [ + page, + boundaries, + responsiveSiblings, + clampedSequence, + computedPages, + gapSize, + ]); const currentItems = useMemo( () =>