JavaScript Frameworks

JavaScript

React

React implementation using hooks (useEffect and useRef) for managing component lifecycle and references:

tip

Full example project can be found here

import { useEffect, useRef } from 'react';
import { VerifySpeedUIEvent } from 'verifyspeed-web-ui';

function App() {
  const verifySpeedRef = useRef(null);

  useEffect(() => {
    const element = verifySpeedRef.current;
    if (element) {
      element.addEventListener(
        VerifySpeedUIEvent.INIT_VERIFICATION,
        handleInitVerification
      );
      element.addEventListener(
        VerifySpeedUIEvent.VERIFICATION_COMPLETED,
        handleVerificationCompleted
      );

      return () => {
        element.removeEventListener(
          VerifySpeedUIEvent.INIT_VERIFICATION,
          handleInitVerification
        );
        element.removeEventListener(
          VerifySpeedUIEvent.VERIFICATION_COMPLETED,
          handleVerificationCompleted
        );
      };
    }
  }, []);

  return <verify-speed-ui ref={verifySpeedRef} />;
}

Vue 3

Vue 3 implementation using lifecycle hooks:

tip

Full example project can be found here

<script setup>
import { ref, onMounted, onUnmounted } from 'vue';
import { VerifySpeedUIEvent } from 'verifyspeed-web-ui';

const verifySpeedRef = ref(null);

onMounted(() => {
  const element = verifySpeedRef.value
  if (element) {
    element.addEventListener(
      VerifySpeedUIEvent.INIT_VERIFICATION,
      handleInitVerification
    )
    element.addEventListener(
      VerifySpeedUIEvent.VERIFICATION_COMPLETED,
      handleVerificationCompleted
    )
  }
})

onUnmounted(() => {
  const element = verifySpeedRef.value
  if (element) {
    element.removeEventListener(
      VerifySpeedUIEvent.INIT_VERIFICATION,
      handleInitVerification
    )
    element.removeEventListener(
      VerifySpeedUIEvent.VERIFICATION_COMPLETED,
      handleVerificationCompleted
    )
  }
})
</script>

<template>
  <verify-speed-ui ref="verifySpeedRef" />
</template>

Svelte

Svelte implementation using lifecycle functions and bind directive:

tip

Full example project can be found here

<script>
  import { onMount, onDestroy } from 'svelte';
  import { VerifySpeedUIEvent } from 'verifyspeed-web-ui';

  let verifySpeedRef;

  onMount(() => {
    if (verifySpeedRef) {
      verifySpeedRef.addEventListener(
        VerifySpeedUIEvent.INIT_VERIFICATION,
        handleInitVerification,
      );
      verifySpeedRef.addEventListener(
        VerifySpeedUIEvent.VERIFICATION_COMPLETED,
        handleVerificationCompleted,
      );
    }
  });

  onDestroy(() => {
    if (verifySpeedRef) {
      verifySpeedRef.removeEventListener(
        VerifySpeedUIEvent.INIT_VERIFICATION,
        handleInitVerification,
      );
      verifySpeedRef.removeEventListener(
        VerifySpeedUIEvent.VERIFICATION_COMPLETED,
        handleVerificationCompleted,
      );
    }
  });
</script>

<verify-speed-ui bind:this={verifySpeedRef} />

Lit

Lit implementation using decorators and lifecycle callbacks:

tip

Full example project can be found here

import { LitElement, html } from 'lit';
import { customElement, query } from 'lit/decorators.js';
import { VerifySpeedUIEvent } from 'verifyspeed-web-ui';

@customElement('verify-speed-wrapper')
export class VerifySpeedWrapper extends LitElement {
  connectedCallback() {
    super.connectedCallback();
    this.addEventListener(
      VerifySpeedUIEvent.INIT_VERIFICATION,
      this.handleInitVerification,
    );
    this.addEventListener(
      VerifySpeedUIEvent.VERIFICATION_COMPLETED,
      this.handleVerificationCompleted,
    );
  }

  disconnectedCallback() {
    super.disconnectedCallback();
    this.removeEventListener(
      VerifySpeedUIEvent.INIT_VERIFICATION,
      this.handleInitVerification,
    );
    this.removeEventListener(
      VerifySpeedUIEvent.VERIFICATION_COMPLETED,
      this.handleVerificationCompleted,
    );
  }

  render() {
    return html`<verify-speed-ui></verify-speed-ui>`;
  }
}

Usage in HTML:

<verify-speed-wrapper></verify-speed-wrapper>

SolidJS

SolidJS implementation using lifecycle and refs:

tip

Full example project can be found here

import { createSignal, onMount, onCleanup } from 'solid-js';
import { VerifySpeedUIEvent } from 'verifyspeed-web-ui';

function VerifySpeed() {
  const [verifySpeedRef, setVerifySpeedRef] = createSignal();

  onMount(() => {
    const element = verifySpeedRef();
    if (element) {
      element.addEventListener(
        VerifySpeedUIEvent.INIT_VERIFICATION,
        handleInitVerification,
      );
      element.addEventListener(
        VerifySpeedUIEvent.VERIFICATION_COMPLETED,
        handleVerificationCompleted,
      );
    }
  });

  onCleanup(() => {
    const element = verifySpeedRef();
    if (element) {
      element.removeEventListener(
        VerifySpeedUIEvent.INIT_VERIFICATION,
        handleInitVerification,
      );
      element.removeEventListener(
        VerifySpeedUIEvent.VERIFICATION_COMPLETED,
        handleVerificationCompleted,
      );
    }
  });

  return <verify-speed-ui ref={setVerifySpeedRef} />;
}

// Usage
function App() {
  return (
    <div>
      <VerifySpeed />
    </div>
  );
}

Qwik

Qwik implementation using lifecycle and refs:

tip

Full example project can be found here

import { component$, useSignal, useVisibleTask$ } from '@builder.io/qwik';
import { VerifySpeedUIEvent } from 'verifyspeed-web-ui';

function VerifySpeed() {
  const verifySpeedRef = useSignal();

  useVisibleTask$(() => {
    const element = verifySpeedRef.value;
    if (element) {
      element.addEventListener(
        VerifySpeedUIEvent.INIT_VERIFICATION,
        handleInitVerification,
      );
      element.addEventListener(
        VerifySpeedUIEvent.VERIFICATION_COMPLETED,
        handleVerificationCompleted,
      );

      return () => {
        element.removeEventListener(
          VerifySpeedUIEvent.INIT_VERIFICATION,
          handleInitVerification,
        );
        element.removeEventListener(
          VerifySpeedUIEvent.VERIFICATION_COMPLETED,
          handleVerificationCompleted,
        );
      };
    }
  });

  return <verify-speed-ui ref={verifySpeedRef} />;
}

// Usage
function App() {
  return (
    <div>
      <VerifySpeed />
    </div>
  );
}