React Example Integration

import React, { useState, useEffect, useRef } from 'react';

export default function ReactUPIQRCode() {
  const [vpa, setVpa] = useState('');
  const [name, setName] = useState('');
  const [amount, setAmount] = useState('');
  const [note, setNote] = useState('Payment');
  const [result, setResult] = useState(null);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState('');
  const upiqrcodeRef = useRef(null);

  // Load the WASM library from CDN on mount
  useEffect(() => {
    const initLib = async () => {
      try {
        const url = 'https://cdn.jsdelivr.net/npm/upiqrcode@1.5.5/upiqrcode.js';
        const mod = await import(url);
        await mod.default(); 
        upiqrcodeRef.current = mod;
      } catch (err) {
        setError('Failed to initialize UPI QR engine.');
      }
    };
    initLib();
  }, []);

  const handleGenerate = async (e) => {
    e.preventDefault();
    if (!vpa || !name) return;

    setLoading(true);
    try {
      const params = {
        payeeVPA: vpa,
        payeeName: name,
        currency: 'INR',
        transactionNote: note,
      };
      if (amount) params.amount = parseFloat(amount).toFixed(2);

      const res = await upiqrcodeRef.current.upiqrcode(params);
      setResult(res); // returns { qr: SVG_STRING, intent: INTENT_URL }
    } catch (err) {
      setError(err.message);
    } finally {
      setLoading(false);
    }
  };

  return (
    <div>
      <form onSubmit={handleGenerate}>...</form>
      {result && (
        <div dangerouslySetInnerHTML={{ __html: result.qr }} />
      )}
    </div>
  );
}