React setup

Capture IQ is a Web Component (<glamar-captureiq>). In React you render it like any custom element, use a ref for imperative calls (init, start, …), and register DOM event listeners with cleanup in useEffect.

We recommend keeping the Capture IQ Setup page open for script loading, sizing, and the end-to-end flow; this page focuses on React-specific wiring.

React demo project

Official demo source (reference implementation): captureiq-react-demo @ v1.0.0.

Prerequisites

• Basic React (hooks, JSX) and async/await.

• npm

  (or yarn/pnpm) and a bundler such as

  Vite

  or

  Webpack

  .
• A Capture IQ api-key (live_apitoken). See Getting started if you have not created one yet.

Load the script

Match the vanilla flow: load the Capture IQ bundle before the element is used (for example in index.html or a root layout script). See Load the script.

Mount in JSX and control with a ref

Render the tag with kebab-case attributes (for example api-key, preset) so the browser maps them to the underlying DOM properties:

import { useEffect, useRef } from "react";

export function CaptureIqHost() {
  const ref = useRef(null);

  useEffect(() => {
    const el = ref.current;
    if (!el) return;

    function onReady() {
      console.log("Capture IQ ready");
    }

    function onError(event) {
      console.error("Capture IQ error", event.detail?.error ?? event.detail);
    }

    function onLicenseError(event) {
      console.error(
        "Capture IQ license error",
        event.detail?.error ?? event.detail
      );
    }

    function onCaptureSuccess(event) {
      const { artifact, metadata } = event.detail.result;
      console.log(
        "Captured",
        metadata.captureId,
        artifact.width,
        artifact.height
      );
    }

    el.addEventListener("ready", onReady);
    el.addEventListener("error", onError);
    el.addEventListener("licenseError", onLicenseError);
    el.addEventListener("captureSuccess", onCaptureSuccess);

    let cancelled = false;
    (async () => {
      try {
        await customElements.whenDefined("glamar-captureiq");
        if (cancelled) return;
        await el.init();
        if (cancelled) return;
        await el.start();
      } catch (err) {
        if (!cancelled) console.error("Capture IQ failed to start", err);
      }
    })();

    return () => {
      cancelled = true;
      el.removeEventListener("ready", onReady);
      el.removeEventListener("error", onError);
      el.removeEventListener("licenseError", onLicenseError);
      el.removeEventListener("captureSuccess", onCaptureSuccess);
      el.destroy().catch(() => {});
    };
  }, []);

  return (
    <glamar-captureiq
      ref={ref}
      api-key={process.env.REACT_APP_CAPTURE_IQ_KEY}
      preset="face"
      style={{ display: "block", width: "100%", maxWidth: 400, height: 600 }}
    />
  );
}

Notes:

• Register and remove the same function for each event type (above, every handler is a function declared inside the effect so removeEventListener matches addEventListener). See Events for the full list.
• customElements.whenDefined('glamar-captureiq') avoids racing the script registration on first paint.
• Call destroy() when unmounting (for example on route change) so camera and UI are torn down. See Methods.
• Prefer environment variables or a secure backend for keys—never commit live keys.