How to set custom width and height of a PDF page, and how come the PDF page being rendered is longer than it's supposed to be?

[eRuaro]

Currently having two issues right now using this package. The first one being I can't seem to set a custom width and height that's ideal for my usecase.

I want the width and height to be akin to the upload a new document component. Similar to how google docs preview works.

But based on the documentation, setting width and height will ignore the height property. In that case, how can I make the PDF wider?

import PropTypes from "prop-types";
import { useEffect, useState } from "react";
import { Document, Page } from "react-pdf";
import supabase from "../../constants";
import { getUserId } from "../../auth/auth";

PDFPreview.propTypes = {
	pdf: PropTypes.object.isRequired,
};

function PDFPreview({ pdf }) {
	const [pdfUrl, setPdfUrl] = useState("");

	useEffect(() => {
		async function init() {
			try {
				const uid = await getUserId();
				const { data, error } = await supabase.storage
					.from("pdf-documents")
					.download(uid + "/" + pdf.name);

				console.log(data);
				if (error !== null) throw error;

				const pdfBlob = new Blob([data]);
				const pdfUrl = URL.createObjectURL(pdfBlob);
				setPdfUrl(pdfUrl);
			} catch (error) {
				console.log(error);
			}
		}
		init();
	}, []);

	

	return (
		<Document file={pdfUrl}>
			<Page
				pageNumber={1}
				className="border-solid border-2 border-sky-500"
				width={62}
			/>
		</Document>
	);
}

export default PDFPreview;

Secondly, the PDF being displayed is longer than it should be.

As you can see, there's a horizontal line at the end of the first page then a long white page. How do I fix this?

[langy]

I too am having the PDF render much longer than the original. Can't seem to find any docs that reference why this happens.

EDIT: I figured out why this was happening, it was adding text and annotations layers underneath the original PDF. Because I'm not using any of the default CSS imports, these were displaying as big chunks of white underneath and cause a long scrollable area of nothingness. I just disabled both layers with the appropriate props on the page element, like <Page renderAnnotationLayer={false} renderTextLayer={false} />, and then rendered the PDF as expected.

The down side to this approach however is that you do lose the text and annotations layers which are almost definitely going to be needed. So the better option here is to import the CSS, which is what I've done instead, and again fixes the issue.

import "react-pdf/dist/esm/Page/AnnotationLayer.css";
import "react-pdf/dist/esm/Page/TextLayer.css";