react pdf

 ......

....

using "pdfjs-dist": "3.11.174", "react-pdf": "9.2.1",

// import { useState, useEffect, useMemo } from 'react';

// import { Document, Page, pdfjs } from 'react-pdf';

// import workerSrc from 'pdfjs-dist/build/pdf.worker.min?url';

// pdfjs.GlobalWorkerOptions.workerSrc = workerSrc;

// type BlogDetailsProps = {

// fileUrl: string;

// onBack: () => void;

// };

// export default function BlogDetails({ fileUrl, onBack }: BlogDetailsProps) {

// const [numPages, setNumPages] = useState<number>();

// const [pageNumber, setPageNumber] = useState<number>(1);

// const [loading, setLoading] = useState<boolean>(true);

// console.log('fileUrl:', fileUrl); // Check if fileUrl is correct

// function onDocumentLoadSuccess({ numPages }: { numPages: number }) {

// console.log('Document loaded successfully', numPages); // Check if this is triggered

// setNumPages(numPages);

// setLoading(false);

// }

// function onLoadError(error: any) {

// console.error('Error loading PDF:', error); // Log any errors

// setLoading(false); // Stop loading in case of an error

// }

// function onPrevPage() {

// setPageNumber((prev) => Math.max(prev - 1, 1));

// }

// function onNextPage() {

// setPageNumber((prev) => Math.min(prev + 1, numPages || prev));

// }

// useEffect(() => {

// const timer = setTimeout(() => {

// if (loading) {

// console.error('Loading took too long');

// setLoading(false); // Stop loading after timeout

// }

// }, 10000); // 10 seconds timeout

// return () => clearTimeout(timer); // Clean up timeout

// }, [loading]);

// // Memoize the file URL to avoid unnecessary re-renders

// const memoizedFileUrl = useMemo(() => ({ url: fileUrl }), [fileUrl]);

// return (

// <div style={{ padding: 24 }}>

// <button

// onClick={onBack}

// style={{

// marginBottom: 16,

// padding: '8px 16px',

// backgroundColor: '#007BFF',

// color: '#fff',

// border: 'none',

// borderRadius: 4,

// cursor: 'pointer',

// }}

// >

// ← Back

// </button>

// <div style={{ marginBottom: 16 }}>Showing PDF: {fileUrl}</div>

// {loading ? (

// <div>Loading...</div>

// ) : (<>

// <div

// style={{

// border: '2px solid #000', // Black border around the PDF display

// padding: '16px', // Optional padding inside the border

// marginBottom: '16px', // Optional margin

// maxWidth: '100%', // Ensure it fits within the container

// overflow: 'auto', // Handle overflow if needed

// }}

// >

// <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', marginTop: '16px' }}>

// <button onClick={onPrevPage} disabled={pageNumber <= 1} style={{ marginRight: '8px' }}>

// Previous

// </button>

// <span style={{ margin: '0 16px' }}>

// {`Page ${pageNumber} of ${numPages}`}

// </span>

// <button onClick={onNextPage} disabled={pageNumber >= (numPages || 1)} style={{ marginLeft: '8px' }}>

// Next

// </button>

// </div>

// <Document

// file={memoizedFileUrl} // Use memoized version of the fileUrl

// onLoadSuccess={onDocumentLoadSuccess}

// onLoadError={onLoadError}

// options={{

// cMapUrl: 'cmaps/', // Optional: only needed for certain PDFs

// cMapPacked: true,

// }}

// >

// <Page

// pageNumber={pageNumber}

// renderTextLayer={false}

// renderAnnotationLayer={false}

// width={window.innerWidth * 0.8}

// />

// </Document>

// </div>

// </>

// )}

// </div>

// );

// }