responsive pdf preview

components/previews/PDFPreview.tsx

@@ -1,4 +1,4 @@
-import { FunctionComponent, useState } from 'react'
+import { createRef, FunctionComponent, useEffect, useRef, useState } from 'react'
 import { Document, Page, pdfjs } from 'react-pdf'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 
@@ -12,60 +12,82 @@ const PDFPreview: FunctionComponent<{ file: any }> = ({ file }) => {
   const [totalPages, setTotalPages] = useState(0)
   const [loadingText, setLoadingText] = useState('Loading PDF ...')
 
+  const [pdfContainerWidth, setPdfContainerWidth] = useState(400)
+  const pdfContainter = useRef<HTMLDivElement>(null)
+
   const onDocumentLoadSuccess = (pdf: any) => {
     setTotalPages(pdf.numPages)
   }
 
+  useEffect(() => {
+    setPdfContainerWidth(pdfContainter.current ? pdfContainter.current.offsetWidth : 400)
+  }, [])
+
   return (
-    <div className="bg-white rounded shadow md:p-3 w-full overflow-scroll" style={{ maxHeight: '90vh' }}>
+    <>
-      <div className="w-full mx-auto overflow-scroll" style={{ maxHeight: '60vh' }}>
+      <div
-        <Document
+        className="flex flex-col bg-white rounded shadow md:p-3 w-full overflow-scroll"
-          file={file['@microsoft.graph.downloadUrl']}
+        style={{ maxHeight: '90vh' }}
-          onLoadSuccess={onDocumentLoadSuccess}
+      >
-          loading={<Loading loadingText={loadingText} />}
+        <div className="w-full flex-1 overflow-scroll" ref={pdfContainter} style={{ maxHeight: '80vh' }}>
-          onLoadProgress={({ loaded, total }) => {
+          <Document
-            setLoadingText(`Loading PDF ${Math.round((loaded / total) * 100)}%`)
+            className="bg-gray-200"
-          }}
+            file={file['@microsoft.graph.downloadUrl']}
-        >
+            onLoadSuccess={onDocumentLoadSuccess}
-          <Page pageNumber={pageNumber} />
+            loading={<Loading loadingText={loadingText} />}
-        </Document>
+            onLoadProgress={({ loaded, total }) => {
-      </div>
+              setLoadingText(`Loading PDF ${Math.round((loaded / total) * 100)}%`)
-      <div className="flex flex-wrap space-x-2 my-4 md:mb-0 w-full items-center justify-center">
-        <button
-          className="px-4 py-2 bg-red-500 text-white rounded cursor-pointer focus:ring focus:ring-red-300 focus:outline-none hover:bg-red-600 transition-all duration-75 disabled:opacity-50"
-          onClick={() => {
-            pageNumber > 1 && setPageNumber(pageNumber - 1)
-          }}
-          disabled={!(pageNumber > 1)}
-        >
-          <FontAwesomeIcon icon="arrow-left" />
-        </button>
-        <div className="px-4 py-2">
-          Page{' '}
-          <input
-            value={pageNumber}
-            className="w-10 mr-1 text-center p-1 bg-red-50 rounded focus:ring focus:ring-red-300 focus:outline-none"
-            onChange={e => {
-              const v = parseInt(e.target.value)
-              if (v <= totalPages && v >= 0) {
-                setPageNumber(v)
-              }
             }}
-          ></input>
+          >
-          /<span className="ml-1 text-center">{totalPages}</span>
+            <Page
+              pageNumber={pageNumber}
+              width={pdfContainerWidth > 400 ? pdfContainerWidth * 0.8 : pdfContainerWidth}
+            />
+          </Document>
         </div>
-        <button
+
-          className="px-4 py-2 bg-red-500 text-white rounded cursor-pointer focus:ring focus:ring-red-300 focus:outline-none hover:bg-red-600 transition-all duration-75 disabled:opacity-50"
+        <div className="flex flex-wrap space-x-2 my-4 md:mb-0 w-full items-center justify-center">
-          onClick={() => {
+          <button
-            pageNumber < totalPages && setPageNumber(pageNumber + 1)
+            className="px-4 py-2 bg-red-500 text-white rounded cursor-pointer focus:ring focus:ring-red-300 focus:outline-none hover:bg-red-600 transition-all duration-75 disabled:opacity-50"
-          }}
+            onClick={() => {
-          disabled={!(pageNumber < totalPages)}
+              pageNumber > 1 && setPageNumber(pageNumber - 1)
-        >
+            }}
-          <FontAwesomeIcon icon="arrow-right" />
+            disabled={!(pageNumber > 1)}
-        </button>
+          >
+            <FontAwesomeIcon icon="arrow-left" />
+          </button>
+          <div className="px-4 py-2">
+            Page{' '}
+            <input
+              value={pageNumber}
+              className="w-10 mr-1 text-center p-1 bg-red-50 rounded focus:ring focus:ring-red-300 focus:outline-none"
+              style={{
+                maxWidth: 50,
+              }}
+              onChange={e => {
+                const v = parseInt(e.target.value)
+                if (v <= totalPages && v >= 0) {
+                  setPageNumber(v)
+                }
+              }}
+            ></input>
+            /<span className="ml-1 text-center">{totalPages}</span>
+          </div>
+          <button
+            className="px-4 py-2 bg-red-500 text-white rounded cursor-pointer focus:ring focus:ring-red-300 focus:outline-none hover:bg-red-600 transition-all duration-75 disabled:opacity-50"
+            onClick={() => {
+              pageNumber < totalPages && setPageNumber(pageNumber + 1)
+            }}
+            disabled={!(pageNumber < totalPages)}
+          >
+            <FontAwesomeIcon icon="arrow-right" />
+          </button>
+        </div>
+      </div>
+      <div className="mt-4">
         <DownloadBtn downloadUrl={file['@microsoft.graph.downloadUrl']} />
       </div>
-    </div>
+    </>
   )
 }
 

styles/globals.css

@@ -3,3 +3,7 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+.react-pdf__Page__canvas {
+  @apply mx-auto;
+}