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,14 +12,26 @@ 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
+        className="flex flex-col bg-white rounded shadow md:p-3 w-full overflow-scroll"
+        style={{ maxHeight: '90vh' }}
+      >
+        <div className="w-full flex-1 overflow-scroll" ref={pdfContainter} style={{ maxHeight: '80vh' }}>
           <Document
+            className="bg-gray-200"
             file={file['@microsoft.graph.downloadUrl']}
             onLoadSuccess={onDocumentLoadSuccess}
             loading={<Loading loadingText={loadingText} />}
@@ -27,9 +39,13 @@ const PDFPreview: FunctionComponent<{ file: any }> = ({ file }) => {
               setLoadingText(`Loading PDF ${Math.round((loaded / total) * 100)}%`)
             }}
           >
-          <Page pageNumber={pageNumber} />
+            <Page
+              pageNumber={pageNumber}
+              width={pdfContainerWidth > 400 ? pdfContainerWidth * 0.8 : pdfContainerWidth}
+            />
           </Document>
         </div>
+
         <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"
@@ -45,6 +61,9 @@ const PDFPreview: FunctionComponent<{ file: any }> = ({ file }) => {
             <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) {
@@ -63,9 +82,12 @@ const PDFPreview: FunctionComponent<{ file: any }> = ({ file }) => {
           >
             <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;
+}