Reputation: 11
I was facing issue in customizing the google reCAPTCHA error message style Styles. Please follow below description:
I am using the "react-google-recaptcha" npm library to integrate the reCAPTCHA on frontend side for the user validation at the time of login. But the requirement is of customizing the default behavior of the appearances of the error messages or expiration messages
It is version2 with checkbox enter image description here
Custom message requirement(The default message I want to remove) enter image description here
Refer code below:
"use client";
import { useState } from "react";
import ReCAPTCHA from "react-google-recaptcha";
export default function Captcha() {
const recaptcha_site_key: string = process.env.NEXT_PUBLIC_RECAPTCHA_SITE_KEY!;
const [recaptcha, setRecaptcha] = useState<string | undefined>();
const [recaptchaLoaded, setRecaptchaLoaded] = useState(false);
const [recaptchaErrorMessage, setRecaptchaErrorMessage] = useState<string | null>(null);
const handleChange = (token: string | null) => {
if (token) {
setRecaptcha(token);
console.log(token)
} else {
setRecaptcha(undefined);
}
};
const handleExpired = () => {
setRecaptcha(undefined);
setRecaptchaErrorMessage("Your session has expired. Please verify again.");
};
const handleLoaded = () => {
setRecaptchaLoaded(true);
};
const handleErrored = () => {
setRecaptchaErrorMessage("Failed to load reCAPTCHA. Please try refreshing the page.");
};
return (
<div className= "relative flex w-full flex-col items-center justify-center" >
<ReCAPTCHA
sitekey={ recaptcha_site_key }
onChange = { handleChange }
onExpired = { handleExpired }
asyncScriptOnLoad = { handleLoaded }
onErrored = { handleErrored }
/>
{ recaptchaLoaded && recaptchaErrorMessage && (
<div className="mt-2 rounded px-3 py-1 text-sm text-red-500" >
{ recaptchaErrorMessage }
</div>
)
}
</div>
);
}
As, I am using nextjs version 14, for styles tailwind and https://www.npmjs.com/package/react-google-recaptcha. Do let me know how can we do it, Tried overriding the CSS and using custom messages, but it is not working.
Upvotes: 1
Views: 78