Help needed on find when invisible captcha is ready to use.

[raja-madhu]

react-google-recaptcha version: 1.0.5

Hi @dozoisch,

I want to know if there is any way to find when the recaptcha is ready to use.

I'm using Invisible type recaptcha and I have a button that I want to enable only when invisible recaptcha is completely loaded and ready to use. I could not find any event or callback fired to determine when recaptcha is completely ready to use. Please let me know if anyone use a proper way to handle this usecase.

Attached my sample component here: ` class MyComp extends PureComponent { constructor(props) { super(props); this.submit = this.submit.bind(this); this.onSubmitHandler = this.onSubmitHandler.bind(this); this.onCaptchaLoaded = this.onCaptchaLoaded.bind(this); this.recaptchaRef = React.createRef(); }

onSubmitHandler(e) {
    e.preventDefault();
    if (!!this.recaptchaRef.current.getValue()) {
        this.submit();
    } else {
        this.recaptchaRef.current.execute();
    }
}

submit() {
    //actual submit action logic goes here
}

onCaptchaLoaded() {
    this.setState({ captchaLoaded: true });
}

render() {
    return (
        <form onSubmit={this.onSubmitHandler}>
            <ReCAPTCHA
                ref={this.recaptchaRef}
                size='invisible'
                sitekey='key'
                onChange={response => {
                    if (response) {
                        this.submit();
                    } else {
                        this.recaptchaRef.current.execute();
                    }
                }}
                asyncScriptOnLoad= {this.onCaptchaLoaded}
            />
            <button type='submit' disabled={!captchaLoaded}>
                button text
            </button>
        </form>);
}

}`

[hartzis]

What you have i think is the best we got right now. There doesn't appear to be any hooks within recaptcha for when it is "ready".

i turned what you have into a codesandbox - https://codesandbox.io/s/10q74jj593

We could add a handler for after react-google-recaptcha calls render? afterRecaptchaRender? PR? Could go right after this: https://github.com/dozoisch/react-google-recaptcha/blob/57b27396c889be69a9f9e6a5be699631c206437c/src/recaptcha.js#L57-L69

[raja-madhu]

Thanks for response. Sorry I could respond before, got busy with the work. I'm going with this for now.

I'm new to public Github. When you say PR(pull request), is that mean I can fork and add this feature or its like creating an issue and anyone interested will pick it up.

I would be interested to add this feature. but need some time.

[hartzis]

You can totally fork and add the feature then create a pull request.

you could also make an issue detailing it and someone else could try.

no rush and no worries, cheers!

On Thu, Nov 22, 2018 at 05:31 Raja notifications@github.com wrote:

Thanks for response. Sorry I could respond before, got busy with the work. I'm going with this for now.

I'm new to public Github. When you say PR(pull request), is that mean I can fork and add this feature or its like creating an issue and anyone interested will pick it up.

I would be interested to add this feature. but need some time.

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/dozoisch/react-google-recaptcha/issues/121#issuecomment-441016362, or mute the thread https://github.com/notifications/unsubscribe-auth/AFISkw1ZvkrlL8Wzf6kUmaV_M0WxDPVBks5uxpkEgaJpZM4YmIal .

-- Brian Hartz www.hartzis.me http://www.hartzis.me/about brianhartz@gmail.com