useFileDownload

The useFileDownload hook provides functionality to download the currently loaded PDF file within the React PDF viewer.

It offers a simple way to trigger downloads of the PDF document being viewed, making it easy to add custom download buttons or other UI elements for downloading.

Return Type

Name	Type	Description
download	() => void	Download the PDF file

Usage

To ensure the file download context can be accessed, you will need to use useFileDownload inside a component which is a child of RPProvider.

This example shows how to create a CustomDownloadButton component which uses useFileDownload hook to handle file downloads.

JSX

import { RPConfig, RPProvider, RPPages, RPDefaultLayout, useFileDownload } from '@pdf-viewer/react'

const CustomDownloadButton = () => {
  const { download } = useFileDownload()
  return (
    <div>
      <button onClick={download}>Download!</button>
    </div>
  )
}

export const AppPdfViewer = () => {
  return (
    <RPConfig licenseKey={YOUR_LICENSE_KEY}>
      <RPProvider src="https://cdn.codewithmosh.com/image/upload/v1721763853/guides/web-roadmap.pdf">
        <CustomDownloadButton />
        <RPDefaultLayout style={{ height: '600px' }}>
          <RPPages />
        </RPDefaultLayout>
      </RPProvider>
    </RPConfig>
  )
}

TSX

import { RPConfig, RPProvider, RPPages, RPDefaultLayout, useFileDownload } from '@pdf-viewer/react'
import { type FC } from 'react'

const CustomDownloadButton: FC = () => {
  const { download } = useFileDownload()
  return (
    <div>
      <button onClick={download}>Download!</button>
    </div>
  )
}

export const AppPdfViewer: FC = () => {
  return (
    <RPConfig licenseKey={YOUR_LICENSE_KEY}>
      <RPProvider src="https://cdn.codewithmosh.com/image/upload/v1721763853/guides/web-roadmap.pdf">
        <CustomDownloadButton />
        <RPDefaultLayout style={{ height: '600px' }}>
          <RPPages />
        </RPDefaultLayout>
      </RPProvider>
    </RPConfig>
  )
}