ReCaptcha V2 is not rendered if provider and comsumer is not rendered at the same time

[denke8]

Describe the bug If you use the widget like the example show, it works correctly, but if you want to use it in a more complex app, which uses somekind of router, put the provider around the router and later navigate to a route which renders the recaptcha, is not rendered.

To Reproduce -Run create react app -replace the content of app.js with the following:

import React, { useState, useEffect } from "react";
import { ReCaptchaProvider, ReCaptchaV2 } from "react-recaptcha-x";

const delay = 500;

function App() {
  const [show, setShow] = useState(false);

  useEffect(() => {
    setTimeout(() => setShow(true), delay);
  }, []);

  return (
    <div>
      <ReCaptchaProvider siteKeyV2="KEY">
        {show && (
          <>
            rendered
            <ReCaptchaV2 callback={() => {}} />
          </>
        )}
      </ReCaptchaProvider>
    </div>
  );
}

export default App;

Expected behavior the recaptcha whould render

Actual If you set delay to ~50 it works, if tou set it to ~500 it does not. I guess it depends on when the google recaptcha script (added by this lib) loads

Desktop

• OS: Ubuntu 20.04
• Browser Firefox 75.0 (64bit)
• React 16.13.1
• Rreact-dom 16.13.1
• React-recaptcha-x 1.1.3
• React-scripts 3.4.1

[antokara]

thank you @denesstreambright for the report, I'll try to fix it quickly.

[antokara]

@denesstreambright I just released v1.1.4 with the fix https://www.npmjs.com/package/react-recaptcha-x/v/1.1.4

please let me know if the issue persists. Thanks again and if you like this package, consider starring it, to support it and help others find it.

[denke8]

Thanks for the quick fix, it works now!