fix(wizard): fix footer and header props

README.md

@@ -40,8 +40,8 @@ export default function Index() {
 
   return (
     <WizardProvider
-      header={Header}
-      footer={Footer}
+      header={(props) => <Header {...props} />}
+      footer={(props) => <Footer {...props} />}
       initialIndex={2}
       onStartReached={closeWizard}
       onEndReached={closeWizard}

src/types.ts

@@ -1,8 +1,8 @@
 import { ReactElement } from 'react';
 
 export type WizardProps = {
-  header?: ReactElement;
-  footer?: ReactElement;
+  header?: (props: WizardContext) => ReactElement<WizardContext>;
+  footer?: (props: WizardContext) => ReactElement<WizardContext>;
   initialIndex?: number;
   onStartReached?: () => void;
   onEndReached?: () => void;

src/wizard.context.tsx

@@ -109,43 +109,6 @@ export const WizardProvider = ({
     setActiveIndex((prev) => prev + 1);
   }, [activeIndex, maxAmountOfSteps, onEndReached]);
 
-  /**
-   *
-   * Render a custom footer component.
-   */
-  const renderFooter = useCallback(() => {
-    if (!footer) {
-      return null;
-    }
-    if (!React.isValidElement(footer)) {
-      throw new Error('Invalid footer component.');
-    }
-    return footer;
-  }, [footer]);
-
-  /**
-   *
-   * Render a custom header component.
-   */
-  const renderHeader = useCallback(() => {
-    if (!header) {
-      return null;
-    }
-    if (!React.isValidElement(header)) {
-      throw new Error('Invalid footer component.');
-    }
-    return header;
-  }, [header]);
-
-  /**
-   *
-   * Render the current step.
-   */
-  const renderStep = useCallback(() => {
-    const childrenCollection = getValidChildren(children);
-    return childrenCollection[activeIndex - 1];
-  }, [children, activeIndex]);
-
   /**
    *
    * Values provided to the children.
@@ -173,6 +136,43 @@ export const WizardProvider = ({
     ]
   );
 
+  /**
+   *
+   * Render a header component if any and valid.
+   */
+  const renderHeader = useMemo(() => {
+    if (!header) {
+      return null;
+    } else if (!React.isValidElement(header(value))) {
+      throw new Error('Invalid header component passed to the wizard.');
+    } else {
+      return header(value);
+    }
+  }, [header, value]);
+
+  /**
+   *
+   * Render a footer component if any and valid.
+   */
+  const renderFooter = useMemo(() => {
+    if (!footer) {
+      return null;
+    } else if (!React.isValidElement(footer(value))) {
+      throw new Error('Invalid footer component passed to the wizard.');
+    } else {
+      return footer(value);
+    }
+  }, [footer, value]);
+
+  /**
+   *
+   * Render the current step.
+   */
+  const renderStep = useMemo(() => {
+    const childrenCollection = getValidChildren(children);
+    return childrenCollection[activeIndex - 1];
+  }, [children, activeIndex]);
+
   /**
    *
    * Throw an error if the `initialIndex` prop is invalid.
@@ -187,9 +187,9 @@ export const WizardProvider = ({
 
   return (
     <Wizard.Provider value={value}>
-      {renderHeader()}
-      {renderStep()}
-      {renderFooter()}
+      {renderHeader}
+      {renderStep}
+      {renderFooter}
     </Wizard.Provider>
   );
 };