bug fixes

Author: shettypuneeth

package.json

@@ -1,8 +1,8 @@
 {
     "name": "react-card-stack-carousel",
-    "version": "0.2.2",
+    "version": "0.2.3",
     "description": "A tiny configurable carousel component for React",
-    "main": "dist/index.js",
+    "main": "index.js",
     "scripts": {
         "dev": "vite ./playground",
         "build": "vite build",

playground/vite.config.js

@@ -1,5 +1,5 @@
-import path from "path";
 // vite.config.js
+import path from "path";
 import { defineConfig } from "vite";
 import react from "@vitejs/plugin-react";
 

src/StackedCarousel.jsx

@@ -21,6 +21,9 @@ export function StackedCarousel(props) {
         verticalOffset,
     } = props;
 
+    const totalCount = React.Children.count(children);
+
+    const rootHeight = useRootHeight(height);
     const { handleNext, handlePrevious, getState } = useCardStackCarousel({
         autoplay,
         autoplayInterval,
@@ -29,11 +32,10 @@ export function StackedCarousel(props) {
         onPrevious,
         scaleFactor,
         startIndex,
-        totalCount: children.length,
+        totalCount,
         transitionDuration,
         verticalOffset,
     });
-    const rootHeight = useRootHeight(height);
 
     const renderCards = () => {
         return React.Children.map(children, (child, index) => {
@@ -60,11 +62,13 @@ export function StackedCarousel(props) {
         <section className={className} style={inlineStyle}>
             {renderCards()}
 
-            <Navigation
-                styleOverrides={styleOverrides}
-                onNext={handleNext}
-                onPrevious={handlePrevious}
-            />
+            {totalCount > 1 && (
+                <Navigation
+                    styleOverrides={styleOverrides}
+                    onNext={handleNext}
+                    onPrevious={handlePrevious}
+                />
+            )}
         </section>
     );
 }

src/useCardStackCarousel.js

@@ -30,9 +30,7 @@ export const useCardStackCarousel = (config) => {
     } = config;
 
     const [activeIndex, setActiveIndex] = useState(startIndex);
-    const [transitionState, setTransitionState] = useState(
-        TRANSITION_STATE.Idle
-    );
+    const [transitionState, setTransitionState] = useState(TRANSITION_STATE.Idle);
     const direction = useRef(DIRECTION.None);
 
     const validateParams = () => {
@@ -160,7 +158,7 @@ export const useCardStackCarousel = (config) => {
 
     useEffect(() => {
         validateParams();
-    }, []);
+    }, [totalCount, startIndex]);
 
     useAutoPlay(config, handleNext);
 
@@ -173,10 +171,8 @@ export const useCardStackCarousel = (config) => {
 };
 
 const useAutoPlay = (config, actionCallback) => {
-    const {
-        autoplay = DEFAULT_AUTOPLAY,
-        autoplayInterval = DEFAULT_AUTOPLAY_INTERVAL,
-    } = config;
+    const { autoplay = DEFAULT_AUTOPLAY, autoplayInterval = DEFAULT_AUTOPLAY_INTERVAL } =
+        config;
     const autoplayTimer = useRef(null);
 
     useEffect(() => {

types/index.d.ts

@@ -1,17 +1,15 @@
 declare module "react-card-stack-carousel" {
-    import { ReactNode } from "react";
+    import { ReactNode, FC } from "react";
 
     type StyleKeys = "Root" | "CarouselItem" | "Navigation" | "NavIcon";
-    type StyleOverrides = Record<StyleKeys, React.CSSProperties | string>;
+    type StyleOverrides = Partial<Record<StyleKeys, React.CSSProperties | string>>;
 
     export interface StackedCarouselProps {
         height: number | string;
         children: ReactNode;
         autoplay?: boolean;
         autoplayInterval?: number;
-        containerClassName?: string;
         easingFunction?: string;
-        navContainerClassName?: string;
         onNext?: () => void;
         onPrevious?: () => void;
         scaleFactor?: number;
@@ -21,5 +19,5 @@ declare module "react-card-stack-carousel" {
         verticalOffset?: number;
     }
 
-    export const StackedCarousel: (props: StackedCarouselProps) => ReactNode;
+    export const StackedCarousel: FC<StackedCarouselProps>;
 }