a svelte component for Friendly Captcha (https://friendlycaptcha.com/)

FriendlyCaptcha.svelte

<script lang="ts">
  import { WidgetInstance } from "friendly-challenge"
  import { createEventDispatcher, onDestroy, onMount } from "svelte"

  const dispatch = createEventDispatcher<{ solve: string }>()

  export let sitekey: string

  let widgetDiv: HTMLDivElement
  let widget: WidgetInstance

  onMount(() => {
    widget = new WidgetInstance(widgetDiv, {
      doneCallback: (solution: string) => dispatch("solve", solution),
      sitekey: sitekey,
    })
    widget.start()
  })

  onDestroy(() => {
    if (widget) widget.destroy()
  })
</script>

<!-- According to the docs https://docs.friendlycaptcha.com/#/widget_api:
  "This element should contain the `frc-captcha` class for correct styling
  -->
<div class="frc-captcha" bind:this={widgetDiv}></div>