qrcode

package.json

@@ -27,6 +27,7 @@
     "lucide-react": "^0.277.0",
     "next": "13.5.4",
     "postcss": "8.4.31",
+    "qr-code-styling": "^1.6.0-rc.1",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-intersection-observer": "^9.5.2",

src/components/qrcode/page.tsx

@@ -0,0 +1,46 @@
+import React, { useEffect, useRef } from 'react';
+import QRCodeStyling from 'qr-code-styling';
+
+interface GenerateQRProps {
+  url: string | URL;
+  size?: number;
+  background?: string;
+  color?: string;
+}
+
+const GenerateQR: React.FC<GenerateQRProps> = ({ url, size = 512, background = 'white', color = 'black' }) => {
+  const qrCodeRef = useRef<HTMLDivElement | null>(null);
+
+  useEffect(() => {
+    if (qrCodeRef.current) {
+      const qrCode = new QRCodeStyling({
+        width: size,
+        height: size,
+        data: url.toString(),
+        image: '',
+        margin: 20,
+        qrOptions: {
+          typeNumber: 0,
+          mode: 'Byte',
+          errorCorrectionLevel: 'Q',
+        },
+        dotsOptions: {
+          color: color,
+          type: 'square',
+        },
+        backgroundOptions: {
+          color: background,
+        },
+      });
+
+      qrCode.append(qrCodeRef.current);
+      qrCode.update();
+    }
+  }, [url, size, background, color]);
+
+  return (
+    <div ref={qrCodeRef}></div>
+  );
+};
+
+export default GenerateQR;