feat: add wrapper prop to wizard

Author: devrnt

src/types.ts

@@ -7,6 +7,17 @@ export type WizardProps = {
   footer?: React.ReactNode;
   /** Optional start index @default 0 */
   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 />}>
+   * ...
+   * </Wizard>
+   * ```
+   */
+  wrapper?: React.ReactElement;
 };
 
 export type WizardValues = {

src/wizard.tsx

@@ -5,7 +5,7 @@ import { Handler, WizardProps } from './types';
 import WizardContext from './wizardContext';
 
 const Wizard: React.FC<WizardProps> = React.memo(
-  ({ header, footer, children, startIndex = 0 }) => {
+  ({ header, footer, children, wrapper: Wrapper, startIndex = 0 }) => {
     const [activeStep, setActiveStep] = React.useState(startIndex);
     const [isLoading, setIsLoading] = React.useState(false);
     const hasNextStep = React.useRef(true);
@@ -111,10 +111,18 @@ const Wizard: React.FC<WizardProps> = React.memo(
       return reactChildren[activeStep];
     }, [activeStep, children, header, footer]);
 
+    const enhancedActiveStepContent = React.useMemo(
+      () =>
+        Wrapper
+          ? React.cloneElement(Wrapper, { children: activeStepContent })
+          : activeStepContent,
+      [Wrapper, activeStepContent],
+    );
+
     return (
       <WizardContext.Provider value={wizardValue}>
         {header}
-        {activeStepContent}
+        {enhancedActiveStepContent}
         {footer}
       </WizardContext.Provider>
     );