added inline badge render

Author: ramirezcgn

README.md

@@ -82,7 +82,7 @@ There are three ways to trigger the recaptcha validation: using the `GoogleReCap
 
 #### GoogleReCaptcha
 
-`GoogleRecaptcha` is a react component that can be used in your app to trigger the validation. It provides a prop `onVerify`, which will be called once the verify is done successfully.
+`GoogleRecaptcha` is a react component that can be used in your app to trigger the validation. It provides a prop `onVerify`, which will be called once the verify is done successfully, also supports a prop `refreshReCaptcha` which supports any type of value and is used to force recaptcha to revalidate (you can use a timestamp updated after every submit), there is an example below.
 
 ```javascript
 import {
@@ -120,6 +120,36 @@ const MyComponent: FC = () => {
 };
 ```
 
+```javascript
+// Example of refreshReCaptcha option:
+
+const MyComponent: FC = () => {
+  const [token, setToken] = useState();
+  const [refreshReCaptcha, setRefreshReCaptcha] = useState(false);
+
+  const onVerify = useCallback((token) => {
+    setToken(token);
+  });
+
+  const doSomething = () => {
+    /* do something like submit a form and then refresh recaptcha */
+    setRefreshReCaptcha(r => !r);
+  }
+
+  return (
+    <div>
+      <GoogleReCaptcha
+        onVerify={onVerify}
+        refreshReCaptcha={refreshReCaptcha}
+      />
+      <button onClick={doSomething}>
+        Do Something
+      </button>
+    </div>
+  );
+};
+```
+
 #### React Hook: useGoogleReCaptcha (recommended approach)
 
 If you prefer a React Hook approach over the old good Higher Order Component, you can choose to use the custom hook `useGoogleReCaptcha` over the HOC `withGoogleReCaptcha`.

src/google-recaptcha-provider.tsx

@@ -1,5 +1,4 @@
-import React from 'react';
-import {
+import React, {
   useRef,
   useMemo,
   useState,
@@ -47,6 +46,7 @@ interface IGoogleReCaptchaProviderProps {
 
 export interface IGoogleReCaptchaConsumerProps {
   executeRecaptcha?: (action?: string) => Promise<string>;
+  inlineBadgeId?: string | HTMLElement;
 }
 
 const GoogleReCaptchaContext = createContext<IGoogleReCaptchaConsumerProps>({
@@ -67,15 +67,15 @@ export function GoogleReCaptchaProvider({
   scriptProps,
   language,
   inlineBadgeId,
-  parameters = {},
+  parameters,
   children
 }: IGoogleReCaptchaProviderProps) {
   const [greCaptchaInstance, setGreCaptchaInstance] = useState<null | {
     execute: Function;
   }>(null);
   const clientId = useRef<number | string>(reCaptchaKey);
-
-  const scriptPropsJson = JSON.stringify(scriptProps);
+  const { current: scriptPropsRef } = useRef<any>(scriptProps);
+  const { current: parametersRef } = useRef<any>(parameters);
 
   useEffect(() => {
     if (!reCaptchaKey) {
@@ -86,8 +86,8 @@ export function GoogleReCaptchaProvider({
       return;
     }
 
-    const scriptId = scriptProps?.id || 'google-recaptcha-v3';
-    const onLoadCallbackName = scriptProps?.onLoadCallbackName || 'onRecaptchaLoadCallback';
+    const scriptId = scriptPropsRef?.id || 'google-recaptcha-v3';
+    const onLoadCallbackName = scriptPropsRef?.onLoadCallbackName || 'onRecaptchaLoadCallback';
 
     ((window as unknown) as {[key: string]: () => void})[onLoadCallbackName] = () => {
       /* eslint-disable @typescript-eslint/no-explicit-any */
@@ -99,7 +99,7 @@ export function GoogleReCaptchaProvider({
         badge: 'inline',
         size: 'invisible',
         sitekey: reCaptchaKey,
-        ...(parameters || {})
+        ...(parametersRef || {})
       };
       clientId.current = grecaptcha.render(inlineBadgeId, params);
     };
@@ -131,7 +131,7 @@ export function GoogleReCaptchaProvider({
       onLoadCallbackName,
       useEnterprise,
       useRecaptchaNet,
-      scriptProps,
+      scriptProps: scriptPropsRef,
       language,
       onLoad,
       onError
@@ -140,17 +140,24 @@ export function GoogleReCaptchaProvider({
     return () => {
       cleanGoogleRecaptcha(scriptId);
     };
-  }, [useEnterprise, useRecaptchaNet, scriptPropsJson, language, reCaptchaKey]);
+  }, [
+    useEnterprise,
+    useRecaptchaNet,
+    scriptPropsRef,
+    parametersRef,
+    language,
+    reCaptchaKey
+  ]);
 
   const executeRecaptcha = useCallback(
-    async (action?: string) => {
+    (action?: string) => {
       if (!greCaptchaInstance || !greCaptchaInstance.execute) {
         throw new Error(
           '<GoogleReCaptchaProvider /> Google Recaptcha has not been loaded'
         );
       }
 
-      return await greCaptchaInstance.execute(clientId.current, { action });
+      return greCaptchaInstance.execute(clientId.current, { action });
     },
     [greCaptchaInstance, clientId]
   );

src/google-recaptcha.tsx

@@ -1,20 +1,26 @@
-import { useEffect } from 'react';
+import React, { useEffect } from 'react';
 import { useGoogleReCaptcha } from './use-google-recaptcha';
 import { logWarningMessage } from './utils';
 
 export interface IGoogleRecaptchaProps {
   onVerify: (token: string) => void | Promise<void>;
   action?: string;
+  refreshReCaptcha?: any,
 }
 
-export function GoogleReCaptcha({ action, onVerify }: IGoogleRecaptchaProps) {
+export function GoogleReCaptcha({
+  action,
+  onVerify,
+  refreshReCaptcha,
+}: IGoogleRecaptchaProps) {
   const googleRecaptchaContextValue = useGoogleReCaptcha();
 
   useEffect(() => {
     const { executeRecaptcha } = googleRecaptchaContextValue;
 
     if (!executeRecaptcha) {
-      return;
+      // return value is not used, but here is used to avoid unused dependencies
+      return refreshReCaptcha;
     }
 
     const handleExecuteRecaptcha = async () => {
@@ -30,7 +36,13 @@ export function GoogleReCaptcha({ action, onVerify }: IGoogleRecaptchaProps) {
     };
 
     handleExecuteRecaptcha();
-  }, [action, onVerify, googleRecaptchaContextValue]);
+  }, [action, onVerify, refreshReCaptcha, googleRecaptchaContextValue]);
+
+  const { inlineBadgeId } = googleRecaptchaContextValue;
+  
+  if (typeof inlineBadgeId === 'string') {
+    return <div id={inlineBadgeId} />;  
+  }
 
   return null;
 }