can't get the ref

[yangmiemie233]

same issue

[nijin26]

Same issue.
I am not able to add ref and get the reference to canvas.

[JoaquinNiembro]

same issue

[nijin26]

@JoaquinNiembro @yangmiemie233

If you want a ref for downloading the generated QR as an image then this is what I did as an alternative.

import QRCode from "qrcode.react";

const QRCodeGen = ({ target }) => {
  const download = () => {
    const svg = document.getElementById("QRCode");
    const svgData = new XMLSerializer().serializeToString(svg);
    const canvas = document.createElement("canvas");
    const ctx = canvas.getContext("2d");
    const img = new Image();

    img.onload = () => {
      canvas.width = img.width;
      canvas.height = img.height;
      ctx.drawImage(img, 0, 0);
      const pngFile = canvas.toDataURL("image/png");
      const downloadLink = document.createElement("a");
      downloadLink.download = "QRCode";
      downloadLink.href = `${pngFile}`;
      downloadLink.click();
    };
    img.src = `data:image/svg+xml;base64,${btoa(svgData)}`;
  };

  return (
    <div>
      <QRCode
        id="QRCode"
        value={target}
        size={180}
        bgColor={"#ffffff"}
        fgColor={"#1f1e1e"}
        level={"L"}
        renderAs={"svg"}
        imageSettings={{
          src: "https://static.zpao.com/favicon.png",
          x: null,
          y: null,
          height: 24,
          width: 24,
        }}
      />
      <div>  // Overlary Div. (on Hover)
        <input type="button" value="Download QR" onClick={download} />
      </div>
    </div>
  );
};

export default QRCodeGen; ```

[yaser-alazm]

You cannot use ref on the original QRCode component, as a work around it you can wrap the QRCode component with a div element and pass the rep into the div element like so:

               <div ref={qrCodeEl}>
                <QRCode
                  value='qr-value'
                  size={175}
                />
              </div>

and then you can get the QRCode canvas element like so:
const canvas = qrCodeEl.current.children[0]

[raRaRa]

Any idea why this library hasn't added support for ref? I've seen multiple PRs being closed that offer both ref and downloading the QR code as SVG & image.

[rj-david]

Created a new PR to add support for a reference to the canvas element

#196

@zpao hope you can consider this.

[HiWayne]

I found that React.forwardRef has been added to the github source code, but it seems that the npm package has not been updated yet in 2024...