CODEWITHSUNDEEP
javascriptreactjsrecaptcha
JavaHead
JavaHead

Reputation: 673

React modules and wrapping Google Recaptcha

I am trying to figure out how to use <script> loading in an existing React app that uses React modules.

All external libraries in my app are loaded with a module loader , e.g :

import Module from /path/to/module;

My task is to incorporate google recaptcha which in all examples that I have seen uses

<script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit" async defer></script>

method to load api.js script file. Is there a way to wrap loading into a module?

thanks, forgive me if the question is dumb, total React noob here.

UPDATE:

I can't use npm , its disabled in my world. But I may be able to leverage this bit from the package.

import ReCAPTCHA from "./recaptcha";
import makeAsyncScriptLoader from "react-async-script";

const callbackName = "onloadcallback";
const lang = typeof window !== "undefined" && (window.recaptchaOptions && window.recaptchaOptions.lang) ?
  `&hl=${window.recaptchaOptions.lang}` :
    "";
const URL = `https://www.google.com/recaptcha/api.js?onload=${callbackName}&render=explicit${lang}`;
const globalName = "grecaptcha";

export default makeAsyncScriptLoader(ReCAPTCHA, URL, {
  callbackName,
  globalName,
  exposeFuncs: ["getValue", "getWidgetId", "reset", "execute"],
});

`

Upvotes: 0

Views: 1196

Answers (1)

3Dos
3Dos

Reputation: 3487

This is probably what you are looking for :

react-google-recaptcha npm package

Upvotes: 1

Related Questions