feat: update forceReRender to be an array (#102)

BREAKING CHANGE: forceReRender prop now accepts an array.

src/components/PayPalButtons.test.js

@@ -100,15 +100,19 @@ describe("<PayPalButtons />", () => {
         });
     });
 
-    test("should re-render Buttons when props.forceReRender changes", async () => {
+    test("should re-render Buttons when any item from props.forceReRender changes", async () => {
         function ButtonWrapper({ initialAmount }) {
             const [amount, setAmount] = useState(initialAmount);
+            const [currency, setCurrency] = useState("USD");
             return (
                 <>
                     <button onClick={() => setAmount(amount + 1)}>
                         Update Amount
                     </button>
-                    <PayPalButtons forceReRender={amount} />
+                    <button onClick={() => setCurrency("EUR")}>
+                        Update Currency
+                    </button>
+                    <PayPalButtons forceReRender={[amount, currency]} />
                 </>
             );
         }
@@ -125,10 +129,17 @@ describe("<PayPalButtons />", () => {
 
         fireEvent.click(screen.getByText("Update Amount"));
 
-        // confirm re-render when the forceReRender value changes
+        // confirm re-render when the forceReRender value changes for first item
         await waitFor(() =>
             expect(window.paypal.Buttons).toHaveBeenCalledTimes(2)
         );
+
+        fireEvent.click(screen.getByText("Update Currency"));
+
+        // confirm re-render when the forceReRender value changes for second item
+        await waitFor(() =>
+            expect(window.paypal.Buttons).toHaveBeenCalledTimes(3)
+        );
     });
 
     test("should not re-render Buttons from side-effect in props.createOrder function", async () => {

src/components/PayPalButtons.tsx

@@ -18,7 +18,7 @@ export interface PayPalButtonsReactProps extends PayPalButtonsComponentProps {
      * Used to re-render the component.
      * Changes to this prop will destroy the existing Buttons and render them again using the current props.
      */
-    forceReRender?: unknown;
+    forceReRender?: unknown[];
     /**
      * Pass a css class to the div container.
      */
@@ -47,7 +47,7 @@ export const PayPalButtons: FunctionComponent<PayPalButtonsReactProps> = ({
     className = "",
     disabled = false,
     children = null,
-    forceReRender,
+    forceReRender = [],
     ...buttonProps
 }: PayPalButtonsReactProps) => {
     const buttonsContainerRef = useRef<HTMLDivElement>(null);
@@ -131,7 +131,7 @@ export const PayPalButtons: FunctionComponent<PayPalButtonsReactProps> = ({
         });
 
         return closeButtonsComponent;
-    }, [isResolved, forceReRender, buttonProps.fundingSource]);
+    }, [isResolved, ...forceReRender, buttonProps.fundingSource]);
 
     // useEffect hook for managing disabled state
     useEffect(() => {

src/components/PayPalMessages.tsx

@@ -7,13 +7,13 @@ import type {
 } from "@paypal/paypal-js/types/components/messages";
 
 export interface PayPalMessagesReactProps extends PayPalMessagesComponentProps {
-    forceReRender?: unknown;
+    forceReRender?: unknown[];
     className?: string;
 }
 
 export const PayPalMessages: FunctionComponent<PayPalMessagesReactProps> = ({
     className = "",
-    forceReRender,
+    forceReRender = [],
     ...messageProps
 }: PayPalMessagesReactProps) => {
     const [{ isResolved, options }] = usePayPalScriptReducer();
@@ -64,7 +64,7 @@ export const PayPalMessages: FunctionComponent<PayPalMessagesReactProps> = ({
                 );
             });
         });
-    }, [isResolved, forceReRender]);
+    }, [isResolved, ...forceReRender]);
 
     return <div ref={messagesContainerRef} className={className} />;
 };

src/stories/PayPalButtons.stories.js

@@ -85,7 +85,7 @@ export const DynamicAmount = () => {
             </select>
             <p>Order ID: {orderID ? orderID : "unknown"}</p>
 
-            <PayPalButtons createOrder={createOrder} forceReRender={amount} />
+            <PayPalButtons createOrder={createOrder} forceReRender={[amount]} />
         </>
     );
 };