Merge pull request #2 from joshxfi/fix/download-img

replace modern-screenshot to html-to-image

package.json

@@ -16,7 +16,8 @@
     "@types/react-dom": "18.0.11",
     "eslint": "8.36.0",
     "eslint-config-next": "13.2.4",
-    "modern-screenshot": "^4.4.6",
+    "html-to-image": "^1.11.11",
+    "nanoid": "^4.0.1",
     "next": "13.2.4",
     "react": "18.2.0",
     "react-dom": "18.2.0",

src/components/ColorPicker.tsx

@@ -0,0 +1,42 @@
+import { ChromePicker } from "@hello-pangea/color-picker";
+import Tippy from "@tippyjs/react";
+
+interface IColorPickerProps {
+  hoverContent: string;
+  color: string;
+  setColor: (color: string) => any;
+}
+export const ColorPicker: React.FC<IColorPickerProps> = ({
+  color,
+  setColor,
+  hoverContent,
+}) => {
+  return (
+    <div className="relative h-16 w-16">
+      <Tippy content={hoverContent} hideOnClick={true}>
+        <div>
+          <Tippy
+            theme="transparent"
+            interactive={true}
+            trigger="click"
+            arrow={false}
+            content={
+              <div className="">
+                <ChromePicker
+                  disableAlpha={true}
+                  color={color}
+                  onChange={(v) => setColor(v.hex)}
+                />
+              </div>
+            }
+          >
+            <div
+              className="absolute h-16 w-16 rounded-md border cursor-pointer"
+              style={{ backgroundColor: color }}
+            ></div>
+          </Tippy>
+        </div>
+      </Tippy>
+    </div>
+  );
+};

src/components/StringToQRCode.tsx

@@ -1,13 +1,14 @@
-import React, { useState } from "react";
+import React, { useState, useCallback, useRef } from "react";
+import { nanoid } from "nanoid";
 import QRCode from "react-qr-code";
-import { domToPng } from "modern-screenshot";
-import { ChromePicker } from "@hello-pangea/color-picker";
-import Tippy from "@tippyjs/react";
-// import { useStore } from "@nanostores/react";
+import { toPng } from "html-to-image";
 // import { addNote, notes } from "../store";
+// import { useStore } from "@nanostores/react";
 import { VscLoading as LoadingIcon } from "react-icons/vsc";
+import { ColorPicker } from "./ColorPicker";
 
 const StringToQRCode = () => {
+  const qrRef = useRef<HTMLDivElement>(null);
   const [fgColor, setFgColor] = useState<string>("#0073F5");
   const [bgColor, setBgColor] = useState<string>("#ffffff");
   const [qrValue, setQRValue] = useState("https://carlo.vercel.app");
@@ -16,23 +17,27 @@ const StringToQRCode = () => {
   // const [userNote, setUserNote] = useState("");
   // const $notes = useStore(notes);
 
-  async function handleDownloadClick() {
-    setIsLoading(true);
-    const element = document.getElementById("qr-code");
-    if (!element) {
-      setIsLoading(false);
+  const handleDownloadClick = useCallback(() => {
+    if (qrRef.current === null) {
       return;
     }
 
-    const dataUrl = await domToPng(element, {
-      scale: 3,
-    });
-    const link = document.createElement("a");
-    link.download = "qr-code.png";
-    link.href = dataUrl;
-    link.click();
+    setIsLoading(true);
+
+    toPng(qrRef.current, { cacheBust: true })
+      .then((dataUrl) => {
+        const link = document.createElement("a");
+        link.download = `${nanoid(5)}.png`;
+        link.href = dataUrl;
+        link.click();
+      })
+      .catch((err) => {
+        console.error(err);
+      });
+
     setIsLoading(false);
-  }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [qrRef]);
 
   return (
     <>
@@ -65,8 +70,8 @@ const StringToQRCode = () => {
           {/* QR CODE */}
           <div className="grid place-items-center">
             <div
+              ref={qrRef}
               className="p-5 rounded-xl"
-              id="qr-code"
               style={{
                 backgroundColor: bgColor,
               }}
@@ -110,43 +115,3 @@ const StringToQRCode = () => {
 };
 
 export default StringToQRCode;
-
-interface IColorPickerProps {
-  hoverContent: string;
-  color: string;
-  setColor: (color: string) => any;
-}
-const ColorPicker: React.FC<IColorPickerProps> = ({
-  color,
-  setColor,
-  hoverContent,
-}) => {
-  return (
-    <div className="relative h-16 w-16">
-      <Tippy content={hoverContent} hideOnClick={true}>
-        <div>
-          <Tippy
-            theme="transparent"
-            interactive={true}
-            trigger="click"
-            arrow={false}
-            content={
-              <div className="">
-                <ChromePicker
-                  disableAlpha={true}
-                  color={color}
-                  onChange={(v) => setColor(v.hex)}
-                />
-              </div>
-            }
-          >
-            <div
-              className="absolute h-16 w-16 rounded-md border cursor-pointer"
-              style={{ backgroundColor: color }}
-            ></div>
-          </Tippy>
-        </div>
-      </Tippy>
-    </div>
-  );
-};

src/pages/index.tsx

@@ -1,6 +1,5 @@
 import StringToQRCode from "@/components/StringToQRCode";
 import Head from "next/head";
-import Image from "next/image";
 import Link from "next/link";
 
 export default function Home() {