Fix bug with always starting at 0

FormidableLabs · Jan 14, 2025 · 4b15005 · 4b15005
1 parent 7d649b1
commit 4b15005
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 7 deletions.
diff --git a/packages/nuka/src/Carousel/Carousel.stories.tsx b/packages/nuka/src/Carousel/Carousel.stories.tsx
@@ -169,7 +169,7 @@ export const GoToPage: Story = {
   },
 };
 
-export const InitialSlide: Story = {
+export const InitialPage: Story = {
   args: {
     initialPage: 2,
     scrollDistance: 'slide',

diff --git a/packages/nuka/src/hooks/use-paging.tsx b/packages/nuka/src/hooks/use-paging.tsx
@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 
 import { CarouselProps } from '../types';
 
@@ -20,11 +20,13 @@ export function usePaging({
   wrapMode,
   initialPage,
 }: PagingProps): UsePagingReturnType {
-  const [currentPage, setCurrentPage] = useState(
-    initialPage && initialPage >= 0 && initialPage < totalPages
-      ? initialPage
-      : 0,
-  );
+  const [currentPage, setCurrentPage] = useState(0);
+
+  useEffect(() => {
+    if (initialPage) {
+      setCurrentPage(Math.max(0, Math.min(initialPage, totalPages)));
+    }
+  }, [initialPage, totalPages]);
 
   const goToPage = (idx: number) => {
     if (idx < 0 || idx >= totalPages) return;