Use the UPCS Embed in React

There is no official React package for UPCS. What follows is an illustrative implementation pattern: a component that loads the documented embed script, mounts the map with a session token from your server, and cleans up on unmount.

The component

import { useEffect, useRef } from 'react';

const SCRIPT_SRC = 'https://api.upcs.io/api/embed/upcs-embed.js';

function loadScript() {
  if (window.UPCS) return Promise.resolve();
  return new Promise((resolve, reject) => {
    const s = document.createElement('script');
    s.src = SCRIPT_SRC;
    s.onload = resolve;
    s.onerror = reject;
    document.head.appendChild(s);
  });
}

export function UpcsMap({ onSelect, height = '500px' }) {
  const ref = useRef(null);

  useEffect(() => {
    let handle;
    let cancelled = false;

    async function start() {
      await loadScript();
      const res = await fetch('/upcs-session');
      const { session_token } = await res.json();
      if (cancelled || !ref.current) return;

      handle = window.UPCS.mount(ref.current, {
        sessionToken: session_token,
        height,
        onSelect,
        onError: (err) => console.error('UPCS', err)
      });
    }

    start().catch(console.error);
    return () => {
      cancelled = true;
      if (handle) handle.destroy();
    };
  }, []);

  return <div ref={ref} />;
}

UPCS.mount accepts either a CSS selector or a DOM element, so the ref can be passed directly.

Points to note

• /upcs-session is your own server endpoint; see creating a session in Node.js or Express.
• React 18 strict mode runs effects twice in development; the cleanup with destroy() keeps this tidy. See embed lifecycle.
• Handle session_expired by requesting a fresh token and remounting: handle onError and session_expired.
• Add http://localhost:5173 for Vite development; see local development with localhost.

Using it in a form

Keep the selected code in component state and submit it with the rest of your form, then re-check it on the server; see handling the onSelect response.