"dependencies": {
    "@innovatrics/dot-magnifeye-liveness": "file:innovatrics-dot-magnifeye-liveness-[VERSION].tgz"
},

import type {
  MagnifEyeLivenessConfiguration,
  HTMLMagnifEyeLivenessElement,
  OnCompleteData
} from "@innovatrics/dot-magnifeye-liveness";

import { useEffect } from "react";
import "@innovatrics/dot-magnifeye-liveness";

function MagnifEyeLiveness(configuration: MagnifEyeLivenessConfiguration) {
  useEffect(() => {
    const magnifEyeHTMLElement = document.getElementById(
        "x-dot-magnifeye-liveness"
    ) as HTMLMagnifEyeLivenessElement | null;

    if (magnifEyeHTMLElement) {
      magnifEyeHTMLElement.configuration = configuration;
    }
  });

  return <x-dot-magnifeye-liveness id="x-dot-magnifeye-liveness" />;
}

function Page() {

  function handleOnComplete(data: OnCompleteData, content: Uint8Array) {
    // ...
  }

  function handleError(error: Error) {
    alert(error);
  }

  return (
    <MagnifEyeLiveness
      onComplete={handleOnComplete}
      onError={handleError}
      sessionToken="1111-222-333-4444"
      transactionCountingToken="provide-the-token-here"
    />
  );
}

import type {
  MagnifEyeLivenessConfiguration,
  HTMLMagnifEyeLivenessElement
} from "@innovatrics/dot-magnifeye-liveness";

import { useLayoutEffect, useRef } from "react";
import "@innovatrics/dot-magnifeye-liveness";

function MagnifEyeLiveness(configuration: MagnifEyeLivenessConfiguration) {
  const ref = useRef<HTMLMagnifEyeLivenessElement | null>(null);

  useLayoutEffect(() => {
    const element = ref.current;

    if (element) {
      element.configuration = configuration;
    }
  }, [configuration]);

  return <x-dot-magnifeye-liveness id="x-dot-magnifeye-liveness" ref={ref} />;
}

import type { MagnifEyeLivenessCallback, MagnifEyeLivenessConfiguration } from "@innovatrics/dot-magnifeye-liveness";

{
  name: "AutoCaptureError",
  message: "The webcam is already in use by another application",
  cause: DOMException: Could not start video source // Original error thrown by browser MediaDevices API
}

<div style={{position: "relative", overflow: "hidden"}}>
  <MagnifEyeLivenessUi control={{ showCameraButtons: true }} />
  <MagnifEyeLiveness
      onComplete={handleOnComplete}
      onError={handleError}
      transactionCountingToken="provide-the-token-here"
  />
</div>

"dependencies": {
    "@innovatrics/dot-auto-capture-ui": "file:innovatrics-dot-auto-capture-ui-[VERSION].tgz",
}

import type {
  MagnifEyeLivenessUiConfiguration,
  HTMLMagnifEyeLivenessUiElement
} from "@innovatrics/dot-auto-capture-ui/magnifeye-liveness";

import { useEffect } from "react";
import "@innovatrics/dot-auto-capture-ui/magnifeye-liveness";

function MagnifEyeLivenessUi(configuration: MagnifEyeLivenessUiConfiguration) {
  useEffect(() => {
    const uiElement = document.getElementById(
      "x-dot-magnifeye-liveness-ui"
    ) as HTMLMagnifEyeLivenessUiElement | null;

    if (uiElement) {
      uiElement.configuration = configuration;
    }
  });

  return <x-dot-magnifeye-liveness-ui id="x-dot-magnifeye-liveness-ui" />;
}

import type {
  MagnifEyeLivenessUiConfiguration,
  HTMLMagnifEyeLivenessUiElement
} from "@innovatrics/dot-auto-capture-ui/magnifeye-liveness";

import { useLayoutEffect, useRef } from "react";
import "@innovatrics/dot-auto-capture-ui/magnifeye-liveness";

function MagnifEyeLivenessUi(configuration: MagnifEyeLivenessUiConfiguration) {
  const ref = useRef<HTMLMagnifEyeLivenessUiElement | null>(null);

  useLayoutEffect(() => {
    const element = ref.current;

    if (element) {
      element.configuration = configuration;
    }
  }, [configuration]);

  return <x-dot-magnifeye-liveness-ui id="x-dot-magnifeye-liveness-ui" ref={ref} />
}

<MagnifEyeLivenessUi
  styling={{
    theme: { colors: { placeholderColor: "green" }, font: { style: 'italic' } },
    backdropColor: "rgba(10, 10, 10, 0.5)"
  }}
  control={{ showCameraButtons: true }}
  instructions={{ candidate_selection: "Candidate selection" }}
  appStateInstructions={{ loading: { text: "Component is loading", visible: true } }}
/>

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="" href="" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Title</title>
    <!-- import font in the head -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Montserrat&display=swap" rel="stylesheet">
    <!------->
  </head>
</html>

import type { AutoCaptureError } from '@innovatrics/dot-magnifeye-liveness/ui-common/src/error';
import type { MagnifEyeState, MagnifEyePhase } from '@innovatrics/dot-magnifeye-liveness/ui-common/src/types';
import { MagnifEyeCustomEvent} from '@innovatrics/dot-magnifeye-liveness/ui-common/src/types';
import { useEffect, useState } from 'react';

export function Events() {
  const [magnifEyePhase, setMagnifEyePhase] = useState<MagnifEyePhase | undefined>();
  const [magnifEyeState, setMagnifEyeState] = useState<MagnifEyeState | undefined>();
  const [magnifEyeError, setMagnifEyeError] = useState<AutoCaptureError>();

  useEffect(() => {
    function handleStatusChanged(event: MagnifEyeCustomEvent) {
      const { error, state, phase } = event.detail || {};

      if (phase) {
        setMagnifEyePhase(phase);
      }

      if (state) {
        setMagnifEyeState(state);
      }

      if (error) {
        setMagnifEyeError(error);
      }
    }

    document.addEventListener(MagnifEyeCustomEvent.STATUS_CHANGED, handleStatusChanged);

    return () => {
      document.removeEventListener(MagnifEyeCustomEvent.STATUS_CHANGED, handleStatusChanged);
    };
  }, []);
};

const statusChangeEvent = "magnifeye-auto-capture:status-changed";

function handleStatusChange(event) {
  console.log(event.detail.state)
  console.log(event.detail.phase)
}

document.addEventListener(statusChangeEvent, handleStatusChange);

/**
 * remove event listener when you're done
 */
document.removeEventListener(statusChangeEvent, handleStatusChange);