Height issue while loading Document inside another component (Swiper)

[GeorgePals]

Hello,

I'm not that sure if it is a Swiper or a react-pdf issue, but let me explain why I'm posting here.

I have something like:

<Swiper {...swiperOptions}>
{elements.map(el => {
  <SwiperSlide>
    <ReactPDFComp pdf={el} />
  </SwiperSlide>
})
</Swiper>

The issue is that, when autoHeight is true on Swiper, then the first slide is always ~158px in height, while the actual slide should be something like ~6.000px in height (it's the PDF :)).

I've tried everything I could think of. From preloading the SwiperSlides (so, Swiper, can already "know" the height of the SwiperSlide) to, IDK, I've lost count.

What I think that is the main issue is that the PDF and its dimensions are not "known" (even if preloaded), until it's actually added on the DOM.

I've also tried to "get the height" of the DIV that encloses the PDF, but for some reason, it didn't work.
The only way that the Swiper is able to display the slides (PDFs) correctly (and this is why I think that it is a react-pdf issue) is if I give the DIV that encloses the PDF, a constant height.
i.e.

<div ref={someRefForWidthCalcs} style={{ height: "5000px"}}>
 <DisplayablePDF />
</div>

but, of course, this can not work for the simple reason that not every PDF has the same height.

So, the question is: Can I, somehow, find out the height of the <Document /> before adding it on the DOM? Is this possible? I've tried using the:
await pdf.getPage(x).height to get each page (so I can sum up the heights later), but I'm getting undefined for each page of the PDF.

Edit: I've also tried: width * A4AspectRatio * numPages to get the height of the PDF, but guess what, it does not work because by the time that the height constraint is calculated, the PDF is already attached on the DOM.

Edit 2: This seems to work (not 100%):

const useHeight = (width, numPages) => {
  const [height, setHeight] = React.useState(null);

  React.useLayoutEffect(() => {
    if (!width || !numPages) {
      setHeight(`${width * a4AspectRatio * 10 => RANDOM NUMBER OF PAGES FOR THE INITIALIZATION}px`);
      return;
    }
    setHeight(`${width * a4AspectRatio * numPages}px`);
  }, [width, numPages]);

  return height;
};
function DisplayablePDF(file) {
const height = useHeight(currentWidth, numPages);

return (
       <Document>{map_array_of_pages}</document>
);
}

but, can I access the numPages earlier?

Any ideas on this are extremely welcome.
Sorry for not posting any code, but I think that I would make things much more difficult to explain, while this way, I'm posting directly the issue.

Thank you in advance for any contribution!

[wojtekmaj]

I've tried using the:
await pdf.getPage(x).height to get each page (so I can sum up the heights later), but I'm getting undefined for each page of the PDF.

You were really close.

const page = await pdf.getPage(x);
const viewport = await page.getViewport({ scale: 1 });
const height = viewport.height;

[GeorgePals]

I've tried using the:
await pdf.getPage(x).height to get each page (so I can sum up the heights later), but I'm getting undefined for each page of the PDF.

You were really close.

const page = await pdf.getPage(x);
const viewport = await page.getViewport({ scale: 1 });
const height = viewport.height;

Hello @wojtekmaj! Thank you for your assistance!

Unfortunately, I can't get it to work. I've tried this:

 async function handleDocumentLoadSuccess(pdf) {
    const nrPages = pdf["numPages"];

    const heights = await Promise.all(
      [...Array.from({ length: nrPages }, (_, idx) => idx + 1)].map(
        async (n) => {
          const page = await pdf.getPage(n);
          const viewport = await page.getViewport({ scale: 1 });
          const height = viewport.height;

          return height;
        }
      )
    );

    setSummedHeights(heights.reduce((a, b) => a + b));
    setNumPages(nrPages);
  }

but, as it seems, react-pdf first attaches the document thing to the DOM and then (at the 2nd render) it attaches the pages and at this time only it makes known the dimensions and the nr. of pages of the PDF. One more thing is that the heights from the handleDocumentLoadSuccess function do not take into account the "width", so they are wrong.

For example:

When the handleDocumentLoadSuccess is called the summed heights are: 3364px, but when useHeight() (see my first post) is called with the correct number of pages, it produces a total height of: 6312.98px.

Is there any way to get the number of the pages of a PDF, outside of the <Document/>? This and only this should make things work (I think).

Thanks!

[wojtekmaj]

Ah damn. I can't spend too much time on this at the moment, but I recall tackling a very similar problem when integrating React-PDF with react-window, maybe this will come in handy:

https://codesandbox.io/s/react-pdf-react-window-x3xzzg?file=/src/App.js

[GeorgePals]

Ah damn. I can't spend too much time on this at the moment, but I recall tackling a very similar problem when integrating React-PDF with react-window, maybe this will come in handy:

https://codesandbox.io/s/react-pdf-react-window-x3xzzg?file=/src/App.js

Thank you! I'll give it a look.

[GeorgePals]

Uh, no. Unfortunately, it doesn't suit my needs. I need it to be 100% dynamic, no scrollbars/wrappers etc.

If you come up with any idea on this, I'd be more than happy to hear it.