Created
February 12, 2021 16:21
-
-
Save kiuKisas/e022a4a827207cc7cc28739c16b7627b to your computer and use it in GitHub Desktop.
Svelte Recaptcha
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// Due to the nature of svelte, implementing recaptcha inside a svelte component by following the official documentation | |
// can lead to DOM issue. | |
// The best way I find is to render the recaptcha inside onMount | |
<script> | |
import { onMount } from 'svelte'; | |
onMount(async () => { | |
window.grecaptcha.ready(() => { | |
grecaptcha.render('recaptcha-id', { sitekey: YOUR_SITE_KEY }) | |
}) | |
}) | |
</script> | |
<svelte:head> | |
<script src="https://www.google.com/recaptcha/api.js" async defer></script> | |
</svelte:head> | |
<div id="recaptcha-id"></div> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
I published a component that address most of these DOM issues.
https://github.com/basaran/svelte-recaptcha-v2
This is also on npm as
svelte-recaptcha-v2