Package Exports

use-pdf

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (use-pdf) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

use-pdf

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

Installation

$ npm i use-pdf

$ 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.

Parameter	Description
`document`	A `PDFDocument`. See react-pdf documentation for more information.

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

Return

This hook returns:

Parameter	Description
`loading`	A boolean that is set to `true` is the PDF is busy rendering.
`error`	An `Error` object if the PDF rendering failed.
`url`	A string that represents a `url` suitable to pass to an `iframe`, a new browser tab, or whatever. This is a blob url that will be revoked when the component containing the `usePDF` hook is unmounted. Will be `null` of `loading=true` or there was an error.
`blob`	A `Blob` that represents the PDF or `null`. Will be set if `url` is set.

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