GRAYBYTE

Back Back Up Advanced Editor

import {useEffect} from "@wordpress/element";
const HCaptcha = ({ sitekey, handleCaptchaResponse }) => {
    const hcaptchaCallback = (response) => {
        handleCaptchaResponse(response);
    };

useEffect(() => {
        const script = document.createElement('script');

script.src = `https://hcaptcha.com/1/api.js?onload=initHcaptcha`;
        script.async = true;
        script.defer = true;

script.onload = () => {
            if (typeof window.hcaptcha !== 'undefined') {
                window.hcaptcha.render('hcaptchaContainer', {
                    sitekey: sitekey,
                    callback: hcaptchaCallback
                });
            }
        };

document.body.appendChild(script);

// Cleanup function
        return () => {
            // Check if hcaptcha is loaded before trying to remove it
            if (window.hcaptcha) {
                window.hcaptcha.reset();
            }
            if (script) {
                script.remove();
            }
        };

}, [sitekey, handleCaptchaResponse]);

return (
        <div className="rsssl-captcha"
             style={{display: 'flex', flexDirection: 'column', alignItems: 'center', marginBottom: '20px'}}>
            <div id='hcaptchaContainer'></div>
        </div>
    );
};

export default HCaptcha;