fix(recaptcha v2 component): delayed render

* modify index of dev and examples, to test and demo delayed render of v2 widget
* fix comment in v2 component IState
* rename checkComponentDidUpdate method of v2 component, to shouldRenderWidget and change comparison logic to check if previously rendered instead of change in providerContext.loaded
* add componentDidMount lifecycle event method in v2 component to invoke shouldRenderWidget
* refactor v2 component tests to smaller files
* add v2 component tests for test with initial providerContext.loaded:true

fix #27

dev/index.tsx

@@ -18,6 +18,7 @@ interface IState {
   v2TokenB: string | undefined;
   v2ExpiredB: boolean;
   v2ErrorB: boolean;
+  v2VisibleB: boolean;
   v3TokenA: string | undefined;
   v3TokenB: string | undefined;
   v3RefreshTokenA?: TReCaptchaV3RefreshToken;
@@ -46,11 +47,21 @@ class App extends React.PureComponent<{}, IState> {
       v2ErrorB: false,
       v3TokenA: undefined,
       v3TokenB: undefined,
+      v2VisibleB: false,
       v3RetrievingA: false,
       v3RetrievingB: false,
       v3RefreshTokenA: undefined,
       v3RefreshTokenB: undefined
     };
+
+    // render the v2 B widget with a delay
+    setTimeout(
+      (): void =>
+        this.setState({
+          v2VisibleB: true
+        }),
+      2000
+    );
   }
 
   public render(): React.ReactNode {
@@ -64,7 +75,8 @@ class App extends React.PureComponent<{}, IState> {
       v3TokenA,
       v3TokenB,
       v3RetrievingA,
-      v3RetrievingB
+      v3RetrievingB,
+      v2VisibleB
     } = this.state;
 
     let RefreshTokenA: React.ReactNode | null;
@@ -104,13 +116,15 @@ class App extends React.PureComponent<{}, IState> {
           <h6>Error: {v2ErrorA ? 'yes' : 'no'}</h6>
 
           <hr />
-          <h2>ReCaptcha V2 - B</h2>
-          <ReCaptchaV2
-            callback={this.v2CallbackB}
-            theme={EReCaptchaV2Theme.Dark}
-            size={EReCaptchaV2Size.Compact}
-            tabindex={0}
-          />
+          <h2>ReCaptcha V2 - B (delayed render)</h2>
+          {v2VisibleB && (
+            <ReCaptchaV2
+              callback={this.v2CallbackB}
+              theme={EReCaptchaV2Theme.Dark}
+              size={EReCaptchaV2Size.Compact}
+              tabindex={0}
+            />
+          )}
           <h6>Token: {v2TokenB}</h6>
           <h6>Expired: {v2ExpiredB ? 'yes' : 'no'}</h6>
           <h6>Error: {v2ErrorB ? 'yes' : 'no'}</h6>

examples/javascript/index.jsx

@@ -25,13 +25,23 @@ class App extends React.PureComponent {
       v2TokenB: undefined,
       v2ExpiredB: false,
       v2ErrorB: false,
+      v2VisibleB: false,
       v3TokenA: undefined,
       v3TokenB: undefined,
       v3RetrievingA: false,
       v3RetrievingB: false,
       v3RefreshTokenA: undefined,
       v3RefreshTokenB: undefined
     };
+
+    // render the v2 B widget with a delay
+    setTimeout(
+      () =>
+        this.setState({
+          v2VisibleB: true
+        }),
+      2000
+    );
   }
 
   render() {
@@ -42,6 +52,7 @@ class App extends React.PureComponent {
       v2TokenB,
       v2ExpiredB,
       v2ErrorB,
+      v2VisibleB,
       v3TokenA,
       v3TokenB,
       v3RetrievingA,
@@ -85,13 +96,15 @@ class App extends React.PureComponent {
           <h6>Error: {v2ErrorA ? 'yes' : 'no'}</h6>
 
           <hr />
-          <h2>ReCaptcha V2 - B</h2>
-          <ReCaptchaV2
-            callback={this.v2CallbackB}
-            theme={EReCaptchaV2Theme.Dark}
-            size={EReCaptchaV2Size.Compact}
-            tabindex={0}
-          />
+          <h2>ReCaptcha V2 - B (delayed render)</h2>
+          {v2VisibleB && (
+            <ReCaptchaV2
+              callback={this.v2CallbackB}
+              theme={EReCaptchaV2Theme.Dark}
+              size={EReCaptchaV2Size.Compact}
+              tabindex={0}
+            />
+          )}
           <h6>Token: {v2TokenB}</h6>
           <h6>Expired: {v2ExpiredB ? 'yes' : 'no'}</h6>
           <h6>Error: {v2ErrorB ? 'yes' : 'no'}</h6>

examples/typescript/index.tsx

@@ -17,6 +17,7 @@ interface IState {
   v2TokenB: string | undefined;
   v2ExpiredB: boolean;
   v2ErrorB: boolean;
+  v2VisibleB: boolean;
   v3TokenA: string | undefined;
   v3TokenB: string | undefined;
   v3RetrievingA: boolean;
@@ -43,13 +44,23 @@ class App extends React.PureComponent<{}, IState> {
       v2TokenB: undefined,
       v2ExpiredB: false,
       v2ErrorB: false,
+      v2VisibleB: false,
       v3TokenA: undefined,
       v3TokenB: undefined,
       v3RetrievingA: false,
       v3RetrievingB: false,
       v3RefreshTokenA: undefined,
       v3RefreshTokenB: undefined
     };
+
+    // render the v2 B widget with a delay
+    setTimeout(
+      (): void =>
+        this.setState({
+          v2VisibleB: true
+        }),
+      2000
+    );
   }
 
   public render(): React.ReactNode {
@@ -60,6 +71,7 @@ class App extends React.PureComponent<{}, IState> {
       v2TokenB,
       v2ExpiredB,
       v2ErrorB,
+      v2VisibleB,
       v3TokenA,
       v3TokenB,
       v3RetrievingA,
@@ -103,13 +115,15 @@ class App extends React.PureComponent<{}, IState> {
           <h6>Error: {v2ErrorA ? 'yes' : 'no'}</h6>
 
           <hr />
-          <h2>ReCaptcha V2 - B</h2>
-          <ReCaptchaV2
-            callback={this.v2CallbackB}
-            theme={EReCaptchaV2Theme.Dark}
-            size={EReCaptchaV2Size.Compact}
-            tabindex={0}
-          />
+          <h2>ReCaptcha V2 - B (delayed render)</h2>
+          {v2VisibleB && (
+            <ReCaptchaV2
+              callback={this.v2CallbackB}
+              theme={EReCaptchaV2Theme.Dark}
+              size={EReCaptchaV2Size.Compact}
+              tabindex={0}
+            />
+          )}
           <h6>Token: {v2TokenB}</h6>
           <h6>Expired: {v2ExpiredB ? 'yes' : 'no'}</h6>
           <h6>Error: {v2ErrorB ? 'yes' : 'no'}</h6>

src/reCaptchaV2/component/IState.ts

@@ -1,5 +1,5 @@
 /**
- * state for ReCaptchaV3 component
+ * state for ReCaptchaV2 component
  */
 export interface IState {
   ref: React.RefObject<HTMLDivElement>;