RPProvider

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`
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`
initialThumbnailsVisible	boolean	(optional) Set the initial thumbnail sidebar visibility	`false`
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 there is an error when loading the PDF document	`undefined`
src	string	Source of the PDF document. To handle the PDF document, please refer to Handling Source of PDF File in Basic Usage.	-

Usage

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>
  )
}

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.