Rename index callback

Author: devrnt

README.md

@@ -84,6 +84,7 @@ Example: pass a footer component that contains a "previous" and "next" button to
 | startIndex | number          | Indicate the wizard to start at the given step             | ❌       | 0       |
 | header     | React.ReactNode | Header that is shown above the active step                 | ❌       |         |
 | footer     | React.ReactNode | Footer that is shown below the active stepstep             | ❌       |         |
+| onStepChange     | (stepIndex) | Callback that will be invoked with the new step index when the wizard changes steps             | ❌       |         |
   | wrapper  | React.React.ReactElement | Optional wrapper that is exclusively wrapped around the active step component. It is not wrapped around the `header` and `footer`             | ❌       |         |
 | children   | React.ReactNode | Each child component will be treated as an individual step | ✔️       |
 

src/types.ts

@@ -9,7 +9,6 @@ export type WizardProps = {
   startIndex?: number;
   /**
    * Optional wrapper that is exclusively wrapped around the active step component. It is not wrapped around the `header` and `footer`
-   *
    * @example With `framer-motion` - `<AnimatePresence />`
    * ```jsx
    * <Wizard wrapper={<AnimatePresence exitBeforeEnter />}>
@@ -18,7 +17,8 @@ export type WizardProps = {
    * ```
    */
   wrapper?: React.ReactElement;
-  onIndexChange?: (stepIndex: number) => void;
+  /** Callback that will be invoked with the new step index when the wizard changes steps */
+  onStepChange?: (stepIndex: number) => void;
 };
 
 export type WizardValues = {
@@ -32,13 +32,11 @@ export type WizardValues = {
   previousStep: () => void;
   /**
    * Go to the given step index
-   *
    * @param stepIndex The step index, starts at 0
    */
   goToStep: (stepIndex: number) => void;
   /**
    * Attach a callback that will be called when calling `nextStep()`
-   *
    * @param handler Can be either sync or async
    */
   handleStep: (handler: Handler) => void;

src/wizard.tsx

@@ -9,7 +9,7 @@ const Wizard: React.FC<React.PropsWithChildren<WizardProps>> = React.memo(
     header,
     footer,
     children,
-    onIndexChange,
+    onStepChange,
     wrapper: Wrapper,
     startIndex = 0,
   }) => {
@@ -23,30 +23,31 @@ const Wizard: React.FC<React.PropsWithChildren<WizardProps>> = React.memo(
     hasNextStep.current = activeStep < stepCount - 1;
     hasPreviousStep.current = activeStep > 0;
 
-    React.useEffect(() => {
-      if (onIndexChange) {
-        onIndexChange(activeStep);
-      }
-    }, [activeStep]);
-
-    const goToNextStep = React.useRef(() => {
+    const goToNextStep = React.useCallback(() => {
       if (hasNextStep.current) {
-        setActiveStep((activeStep) => activeStep + 1);
+        const newActiveStepIndex = activeStep + 1;
+
+        setActiveStep(newActiveStepIndex);
+        onStepChange?.(newActiveStepIndex);
       }
-    });
+    }, [activeStep, onStepChange]);
 
-    const goToPreviousStep = React.useRef(() => {
+    const goToPreviousStep = React.useCallback(() => {
       if (hasPreviousStep.current) {
         nextStepHandler.current = null;
-        setActiveStep((activeStep) => activeStep - 1);
+        const newActiveStepIndex = activeStep - 1;
+
+        setActiveStep(newActiveStepIndex);
+        onStepChange?.(newActiveStepIndex);
       }
-    });
+    }, [activeStep, onStepChange]);
 
     const goToStep = React.useCallback(
       (stepIndex: number) => {
         if (stepIndex >= 0 && stepIndex < stepCount) {
           nextStepHandler.current = null;
           setActiveStep(stepIndex);
+          onStepChange?.(stepIndex);
         } else {
           if (__DEV__) {
             logger.log(
@@ -59,35 +60,35 @@ const Wizard: React.FC<React.PropsWithChildren<WizardProps>> = React.memo(
           }
         }
       },
-      [stepCount],
+      [stepCount, onStepChange],
     );
 
     // Callback to attach the step handler
     const handleStep = React.useRef((handler: Handler) => {
       nextStepHandler.current = handler;
     });
 
-    const doNextStep = React.useRef(async () => {
+    const doNextStep = React.useCallback(async () => {
       if (hasNextStep.current && nextStepHandler.current) {
         try {
           setIsLoading(true);
           await nextStepHandler.current();
           setIsLoading(false);
           nextStepHandler.current = null;
-          goToNextStep.current();
+          goToNextStep();
         } catch (error) {
           setIsLoading(false);
           throw error;
         }
       } else {
-        goToNextStep.current();
+        goToNextStep();
       }
-    });
+    }, [goToNextStep]);
 
     const wizardValue = React.useMemo(
       () => ({
-        nextStep: doNextStep.current,
-        previousStep: goToPreviousStep.current,
+        nextStep: doNextStep,
+        previousStep: goToPreviousStep,
         handleStep: handleStep.current,
         isLoading,
         activeStep,
@@ -96,7 +97,14 @@ const Wizard: React.FC<React.PropsWithChildren<WizardProps>> = React.memo(
         isLastStep: !hasNextStep.current,
         goToStep,
       }),
-      [isLoading, activeStep, stepCount, goToStep],
+      [
+        doNextStep,
+        goToPreviousStep,
+        isLoading,
+        activeStep,
+        stepCount,
+        goToStep,
+      ],
     );
 
     const activeStepContent = React.useMemo(() => {