use-pdf

This is a simple React Hook around the amazing @react-pdf/renderer.

Installation

$ npm i use-pdf

or

$ yarn add use-pdf

Usage

@react-pdf/renderer is great, you can render a PDF into an iframe using <PDFViewer/>, but to have full control over loading and error states requires that you use the BlobProvider component and a render prop like some sort of barbarian.

<BlobProvider document={document}>
  {({ loading, url, error }) => {
    if (loading) {
      return <div>Rendering PDF...</div>;
    }

    if (error) {
      return <div>Error rendering PDF</div>;
    }

    return <iframe title="PDF" src={url} />;
  }}
</BlobProvider>

But with use-pdf, you can use a React Hook like a civilized human being.

const { loading, error, url } = usePDF(document);

if (loading) {
  return <div>Rendering PDF...</div>;
}

if (error) {
  return <div>Error rendering PDF</div>;
}

return <iframe title="PDF" src={url} />;

Parameters

Here are the parameters that you can use.

Note: Be sure to memoize the document sent to usePDF or it will endlessly rerender.

Return

This hook returns:

Example

See a working example in the /example folder. To run the example execute the following:

cd example
npm i
npm start

PDFViewer

The example above shows a Hook alternative for <PDFViewer/> and supports loading and error fallbacks (which PDFViewer does not).

PDFDownloadLink

If you're looking for a hooks replacement for <PDFDownloadLink/>, use the example code, but replace renderig the iframe with the following:

return (
  <a download="somefilename.pdf" href={results.url}>
    Download PDF
  </a>
);

License

MIT Licensed