Merge branch 't49tran:master' into inline-badge

Author: ramirezcgn

README.md

@@ -43,7 +43,7 @@ Same thing applied when you use this library with framework such as Next.js or R
 
 | **Props**       | **Type** | **Default** | **Required?** | **Note**                                                                                                                                                                                                                                                        |
 | --------------- | :------: | ----------: | ------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| reCaptchaKey    | Boolean  |             | Yes           | Your recaptcha key, get one from [here](https://www.google.com/recaptcha/intro/v3.html)                                                                                                                                                                         |
+| reCaptchaKey    | String  |             | Yes           | Your recaptcha key, get one from [here](https://www.google.com/recaptcha/intro/v3.html)                                                                                                                                                                         |
 | scriptProps     |  Object  |             | No            | You can customize the injected `script` tag with this prop. It allows you to add `async`, `defer`, `nonce` attributes to the script tag. You can also control whether the injected script will be added to the document body or head with `appendTo` attribute. |
 | language        |  String  |             | No            | optional prop to support different languages that is supported by Google Recaptcha. https://developers.google.com/recaptcha/docs/language                                                                                                                       |
 | useRecaptchaNet | Boolean  |       false | No            | The provider also provide the prop `useRecaptchaNet` to load script from `recaptcha.net`: https://developers.google.com/recaptcha/docs/faq#can-i-use-recaptcha-globally                                                                                         |
@@ -140,7 +140,7 @@ const YourReCaptchaComponent = () => {
 
     const token = await executeRecaptcha('yourAction');
     // Do whatever you want with the token
-  }, []);
+  }, [executeRecaptcha]);
 
   // You can use useEffect to trigger the verification as soon as the component being loaded
   useEffect(() => {

__tests__/google-recaptcha-provider.test.tsx

@@ -79,6 +79,44 @@ describe('<GoogleReCaptchaProvider />', () => {
     expect(scriptElm!.getAttribute('defer')).toEqual('');
   });
 
+  it('does not reload script if scriptProps object stays the same', async () => {
+    const { rerender } = render(
+      <GoogleReCaptchaProvider reCaptchaKey="TESTKEY" scriptProps={{ nonce: 'NONCE' }}>
+        <div />
+      </GoogleReCaptchaProvider>
+    );
+
+    const scriptElm = document.querySelector('#google-recaptcha-v3');
+    expect(scriptElm).not.toBeNull();
+
+    rerender(
+      <GoogleReCaptchaProvider reCaptchaKey="TESTKEY" scriptProps={{ nonce: 'NONCE' }}>
+        <div />
+      </GoogleReCaptchaProvider>
+    );
+
+    expect(scriptElm).toBe(document.querySelector('#google-recaptcha-v3'));
+  });
+
+  it('reloads script on scriptProps changes', async () => {
+    const { rerender } = render(
+      <GoogleReCaptchaProvider reCaptchaKey="TESTKEY" scriptProps={{ async: false }}>
+        <div />
+      </GoogleReCaptchaProvider>
+    );
+
+    const scriptElm = document.querySelector('#google-recaptcha-v3');
+    expect(scriptElm).not.toBeNull();
+
+    rerender(
+      <GoogleReCaptchaProvider reCaptchaKey="TESTKEY" scriptProps={{ async: true }}>
+        <div />
+      </GoogleReCaptchaProvider>
+    );
+
+    expect(scriptElm).not.toBe(document.querySelector('#google-recaptcha-v3'));
+  });
+
   describe('when using enterprise version', () => {
     it('accept an enterprise prop to load recaptcha from enterprise source', () => {
       render(

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "react-google-recaptcha-v3",
-  "version": "1.9.6",
+  "version": "1.9.8",
   "description": "React component for google-recaptcha v3",
   "module": "dist/react-google-recaptcha-v3.esm.js",
   "main": "dist/react-google-recaptcha-v3.cjs.js",
@@ -20,8 +20,8 @@
     "url": "https://github.com/t49tran/react-google-recaptcha-v3"
   },
   "peerDependencies": {
-    "react": "^17.0",
-    "react-dom": "^17.0"
+    "react": "^17.0 || ^18.0",
+    "react-dom": "^17.0 || ^18.0"
   },
   "dependencies": {
     "hoist-non-react-statics": "^3.3.2"

package.json

@@ -75,6 +75,8 @@ export function GoogleReCaptchaProvider({
   }>(null);
   const clientId = useRef<number | string>(reCaptchaKey);
 
+  const scriptPropsJson = JSON.stringify(scriptProps);
+
   useEffect(() => {
     if (!reCaptchaKey) {
       logWarningMessage(
@@ -138,7 +140,7 @@ export function GoogleReCaptchaProvider({
     return () => {
       cleanGoogleRecaptcha(scriptId);
     };
-  }, [useEnterprise, useRecaptchaNet, scriptProps, language, reCaptchaKey]);
+  }, [useEnterprise, useRecaptchaNet, scriptPropsJson, language, reCaptchaKey]);
 
   const executeRecaptcha = useCallback(
     async (action?: string) => {