feat: use react-pdf-viewer

use react pdf viewer and provide a toolbar that zooms in and out, changes page number and downloads file. Now viewer works on mobile chrome too

Author: abhitrueprogrammer

.npmrc

@@ -0,0 +1 @@
+public-hoist-pattern[]=pdfjs-dist

next.config.js

@@ -6,15 +6,16 @@ await import("./src/env.js");
 
 /** @type {import("next").NextConfig} */
 const config = {
+  swcMinify: false,
+
   images: {
     domains: ["res.cloudinary.com"],
   },
-  webpack: (
-    config, options
-  ) => {
+  webpack: (config, options) => {
+    config.resolve.alias.canvas = false;
     config.module.rules.push({
       test: /\.node/,
-      use: 'raw-loader',
+      use: "raw-loader",
     });
     return config;
   },

package.json

@@ -52,6 +52,7 @@
     "react-dropzone": "^14.3.8",
     "react-hot-toast": "^2.5.2",
     "react-icons": "^5.5.0",
+    "react-pdf": "^9.2.1",
     "tailwind-merge": "^2.6.0",
     "tailwindcss-animate": "^1.0.7",
     "zod": "^3.24.3"

pnpm-lock.yaml

@@ -24,6 +24,17 @@ import {
   SheetTitle,
   SheetTrigger,
 } from "./ui/sheet";
+export async function downloadFile(url: string, filename: string) {
+  try {
+    const response = await axios.get(url, { responseType: "blob" });
+    const blob = new Blob([response.data]);
+    const link = document.createElement("a");
+    link.href = window.URL.createObjectURL(blob);
+    link.download = filename;
+    link.click();
+    window.URL.revokeObjectURL(link.href);
+  } catch (error) { }
+}
 
 const CatalogueContent = () => {
   const router = useRouter();
@@ -213,17 +224,6 @@ const CatalogueContent = () => {
     setSelectedPapers([]);
   }, []);
 
-  async function downloadFile(url: string, filename: string) {
-    try {
-      const response = await axios.get(url, { responseType: "blob" });
-      const blob = new Blob([response.data]);
-      const link = document.createElement("a");
-      link.href = window.URL.createObjectURL(blob);
-      link.download = filename;
-      link.click();
-      window.URL.revokeObjectURL(link.href);
-    } catch (error) { }
-  }
 
   return (
     <div className="relative flex min-h-screen justify-center p-0 md:justify-normal">