QRCode.tsx 組件代碼

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

const QRCode = require('qrcode');

export interface QRCodeProps {
  value?: string;
}

const Index: React.FC<QRCodeProps> = ({ value }) => {
  const ref = useRef<HTMLCanvasElement>(null);

  useEffect(() => {
    if (value) QRCode.toCanvas(ref.current, value);
  }, [value]);

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

export default Index;

使用QRCode組件

<QRCode value={"test"} />

效果圖如下

二維碼效果圖