The RPProvider component is a required component that loads the PDF document and initializes the React PDF states.

It serves as a context provider that manages the PDF viewer’s core functionality, including document loading, page rendering, zoom levels, scroll modes and more.

React components which need to access states and functionalities of RPProvider must be wrapped within RPProvider.

Props

name	type	description	default
characterMap	CharacterMap	(optional) Specify the character map (CMap) to be used for text rendering	undefined
darkMode	boolean	(optional) Set the state of dark theme	false
disableAutoFetch	boolean	(optional) Disable pre-fetching of PDF file data. When set to true, PDF.js will not automatically fetch more data even if it isn’t needed to display the current page, helping to reduce bandwidth usage. NOTE: It is also necessary to disable streaming (see disableStream) in order for disabling of pre-fetching to work correctly.	false
disableStream	boolean	(optional) Disable streaming of PDF file data. When set to true, PDF.js will use range requests instead of streaming to load the PDF document.	false
downloadFilename	string	(optional) The name of the PDF file to be used when downloading. Remark: If undefined, the original filename will be used.	undefined
initialPage	number	(optional) Set the initial page number	1
initialRotation	number	(optional) Set the initial rotate degree	0 (0, 90, 180, 270)
initialScale	number | ZoomLevel	(optional) The initial zoom level of the PDF document with respect to React PDF. If unspecified, it is determined by the page dimensions and the width of the container.	ZoomLevel.PAGE_FIT (Scale ranges from 0 to 100.)
initialScrollMode	ScrollMode	(optional) Set the initial scroll mode	ScrollMode.VERTICAL_SCROLLING
initialSearch	string	(optional) Set initial text to search in PDF	undefined
initialSelectionMode	SelectionMode	(optional) Set the initial selection mode	SelectionMode.TEXT
initialThumbnailsVisible	boolean	(optional) Set the initial thumbnail sidebar visibility	false
initialViewMode	ViewMode	(optional) Set the initial view mode	ViewMode.SINGLE_PAGE
interactiveForm	boolean	(optional) Enable or disable form field interactions in the PDF. When set to false, form fields (text inputs, checkboxes, dropdowns, etc.) will be displayed but not interactive.	true
loaderImage	React.ReactNode	(optional) Custom loader to display while loading. If not provided, a default loader will be used.	undefined
locale	string	(optional) Set the The locale string key, which must match the key of the localization object; otherwise, it will fall back to en_US	en_US
localization	Record<string, Localization>	(optional) The locale object that will be used in the component	{ en_US: {}, zh_CN: {}, it_IT: {}, pt_PT: {}, th_TH: {} }
onDarkModeChange	(darkMode: boolean) => void	(optional) A function that will be called when darkMode is changed	undefined
onLoaded	(pdf: PDFDocumentProxy) => void	(optional) A function that will be called when the layout is loaded	undefined
onLoadError	(error: any) => void	(optional) A function that will be called if there is an error when loading the PDF document	undefined
onLoadProgress	(progress: number) => void	(optional) A function that will be called when the progress of loading the PDF document is updated	undefined
onPageChange	(page: number) => void	(optional) A function that will be called when the current focused page is changed	undefined
onRotate	(rotation: Record<number, number>) => void	(optional) A function that will be called when a PDF page or document is rotated in a certain direction	undefined
onScroll	(scrollEvent: Event) => void	(optional) A function that will be called when the Viewer is scrolled	undefined
rangeChunkSize	number	Specify the maximum size (in bytes) of PDF data to be requested in each Range Request. This facilitates sectional loading of large documents. Important: The server must support partial content requests by including the Accept-Ranges: bytes HTTP header in its response. Without this header, range requests will not work as expected.	65536 bytes (64 KB)
src	string	Source of the PDF document. To handle the PDF document, please refer to Handling Source of PDF File in Basic Usage.	-

Usage

JSX

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

export const AppPdfViewer = () => {
  const onLoadError = (error) => {
    // Do something with the error
  }

  const onLoaded = (pdf) => {
    // Do something with the pdf
  }

  const onDarkModeChange = (darkMode) => {
    // Do something with the dark mode
  }

  return (
    <RPConfig>
      <RPProvider
        src="https://cdn.codewithmosh.com/image/upload/v1721763853/guides/web-roadmap.pdf"
        onLoaded={onLoaded}
        characterMap={{
          url: 'https://cdn.jsdelivr.net/npm/pdfjs-dist@2.0.288/cmaps/',
          isCompressed: true
        }}
        onLoadError={onLoadError}
        onDarkModeChange={onDarkModeChange}
      >
        <RPDefaultLayout>
          <RPPages />
        </RPDefaultLayout>
      </RPProvider>
    </RPConfig>
  )
}

TSX

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

export const AppPdfViewer = () => {
  const onLoadError = (error: any) => {
    // Do something with the error
  }

  const onLoaded = (pdf: PDFDocumentProxy) => {
    // Do something with the pdf
  }

  const onDarkModeChange = (darkMode: boolean) => {
    // Do something with the dark mode
  }

  return (
    <RPConfig>
      <RPProvider
        src="https://cdn.codewithmosh.com/image/upload/v1721763853/guides/web-roadmap.pdf"
        onLoaded={onLoaded}
        characterMap={{
          url: 'https://cdn.jsdelivr.net/npm/pdfjs-dist@2.0.288/cmaps/',
          isCompressed: true
        }}
        onLoadError={onLoadError}
        onDarkModeChange={onDarkModeChange}
      >
        <RPDefaultLayout>
          <RPPages />
        </RPDefaultLayout>
      </RPProvider>
    </RPConfig>
  )
}

Hooks

RPProvider provides hooks that can be used to access the PDF document and control the viewer behavior. You may refer to the Hooks Overview page for more details.