Fixes EddieHubCommunity/BioDrop#8640 Updated QR to use next-qrcode.

components/user/UserProfile.js

@@ -1,6 +1,6 @@
 import React, { useRef, useState } from "react";
 import { FaShare } from "react-icons/fa6";
-import { QRCodeCanvas } from "qrcode.react";
+import { useQRCode } from "next-qrcode";
 import { saveAs } from "file-saver";
 import { useRouter } from "next/router";
 
@@ -25,6 +25,8 @@ function UserProfile({ BASE_URL, data }) {
   //Declared Ref object for QR
   const qrRef = useRef(null);
 
+  const { Canvas } = useQRCode();
+
   //qrRef.current is pointing to the DOM node and firstChild to its canvas
   const downloadQR = () =>
     qrRef.current.firstChild.toBlob((blob) =>
@@ -132,10 +134,21 @@ function UserProfile({ BASE_URL, data }) {
           <div>
             <div className="flex justify-center my-4" ref={qrRef}>
               {qrShow && (
-                <QRCodeCanvas
+                <Canvas
+                  text={`${BASE_URL}/${data.username}`}
                   className="border border-white"
-                  value={`${BASE_URL}/${data.username}`}
-                  size={fallbackImageSize * 2}
+                  logo={{
+                    src: `${BASE_URL}/logo192.png`,
+                    options: { width: 50 },
+                  }}
+                  options={{
+                    margin: 1,
+                    width: fallbackImageSize * 2,
+                    color: {
+                      dark: "#122640",
+                      light: "#f2f7ff",
+                    },
+                  }}
                 />
               )}
             </div>
@@ -156,7 +169,7 @@ function UserProfile({ BASE_URL, data }) {
                     href={`${SOCIAL_SHARE_LINK}${BASE_URL}/${data.username}${
                       includeText
                         ? `&text=${encodeURIComponent(
-                            `Check out ${data.name}'s profile on BioDrop.io`
+                            `Check out ${data.name}'s profile on BioDrop.io`,
                           )}`
                         : ""
                     }`}

package.json

@@ -26,10 +26,10 @@
     "mongoose": "^7.5.0",
     "next": "^13.4.12",
     "next-auth": "^4.22.3",
+    "next-qrcode": "^2.5.1",
     "next-themes": "^0.2.1",
     "pino": "^8.14.1",
     "pino-pretty": "^10.1.0",
-    "qrcode.react": "^3.1.0",
     "react": "^18.2.0",
     "react-children-utilities": "^2.9.0",
     "react-dom": "^18.2.0",
@@ -117,4 +117,4 @@
   "bugs": {
     "url": "https://github.com/EddieHubCommunity/BioDrop/issues"
   }
-}
+}