Having difficulties with styling

[JamesSingleton]

I wanted to just kind of get up and running with this library so I borrowed some of the styles from next-app example.

Here is the code rendering it

<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
  {data.pdfs.map((pdf) => (
    <div
      key={pdf._key}
      className="p-2 border rounded flex flex-col items-center"
    >
      <h3 className="text-lg font-bold text-center">{pdf.title}</h3>
      <div className="Example__container">
        <div className="Example__container__document">
          <PDFComponent url={pdf.file} />
        </div>
      </div>
      <Button className="mt-2">
        <DownloadIcon className="mr-2 h-4 w-4" /> Download
      </Button>
    </div>
  ))}
</div>

And this is the custom component

'use client'

import { useState } from 'react'
import { pdfjs, Document, Page } from 'react-pdf'
import 'react-pdf/dist/esm/Page/AnnotationLayer.css'
import 'react-pdf/dist/esm/Page/TextLayer.css'

import type { PDFDocumentProxy } from 'pdfjs-dist'

pdfjs.GlobalWorkerOptions.workerSrc = new URL(
  'pdfjs-dist/build/pdf.worker.min.js',
  import.meta.url,
).toString()

const options = {
  cMapUrl: '/cmaps/',
  standardFontDataUrl: '/standard_fonts/',
}

type PDFFile = string | File | null

export default function PDFComponent({ url }: { url: string }) {
  const [file, setFile] = useState<PDFFile>()
  const [numPages, setNumPages] = useState<number>()

  function onFileChange(event: React.ChangeEvent<HTMLInputElement>): void {
    const { files } = event.target

    if (files && files[0]) {
      setFile(files[0] || null)
    }
  }

  function onDocumentLoadSuccess({
    numPages: nextNumPages,
  }: PDFDocumentProxy): void {
    setNumPages(nextNumPages)
  }

  return (
    <Document
      file={url}
      onLoadSuccess={onDocumentLoadSuccess}
      options={options}
    >
      {Array.from(new Array(numPages), (el, index) => (
        <Page key={`page_${index + 1}`} pageNumber={index + 1} />
      ))}
    </Document>
  )
}

However, it looks like there's an issue with the PDF rendering outside of the div as you can see in the screenshot below.

This is causing an issue because you can't click on the download button and you can select a bunch of empty space because there's content from react-pdf there.

Any help would be greatly appreciated! I am sure I am just styling it incorrectly.

[JamesSingleton]

So I ended up just using <Thumbnail /> and then updating the CSS to

.Example__container__document .react-pdf__Document {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.Example__container__document .react-pdf__Thumbnail__page {
  max-width: calc(100% - 2em);
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.5);
  margin: 1em;
}

.Example__container__document .react-pdf__Thumbnail__page canvas {
  max-width: 100%;
  height: auto !important;
}

.Example__container__document .react-pdf__message {
  padding: 20px;
  color: white;
}

And it seems to have done the trick

[wojtekmaj]

Don't do this. React-PDF needs to know exactly the final render size in order to align all the layers correctly. Use window onresize event for simple layouts, ResizeObserver on div containing PDF for more complex layouts.

[JamesSingleton]

@wojtekmaj that is directly from the example provided in this repo though, so I am a little confused why to not do what the example says?

[wojtekmaj]

The example also has a (very primitive) way of passing width explicitly to React -PDF, which is what's crucial. Crucial enough, I must say, that I'm not proud of this example at all and I'll update it to emphasize the need of what I've mentioned above.

[JamesSingleton]

This also applies to using <Thumbnail. /> as well? In my testing it seemed fine but could just be luck?

[wojtekmaj]

Thumbnail is exactly that: a thumbnail. Purely decorative element really, meant to build sidebar navigation or something. It doesn't have a text layer, not annotations, and of course no interactive forms. Therefore I guess it's okay to style it this way.

One thing to bear in mind though that rendering PDFs is really expensive - so rendering "just the right size" has more benefits than just better styling.