Components

The React PDF viewer is built using a composable component architecture where each component serves a specific purpose. Here’s a detailed breakdown of how these components work together:

Anatomy

<RPConfig>              {/* Configure global settings and license */}
  <RPProvider>          {/* Handle PDF document loading and state */}
    <RPTheme>           {/* Manage theming and styling (optional) */}
      <RPDefaultLayout> {/* Provide the default toolbar structure */}
        <RPPages />     {/* Render the actual PDF content */}
      </RPDefaultLayout>
    </RPTheme>
  </RPProvider>
</RPConfig>

Each component wraps the next in a hierarchical structure:

1. RPConfig - To add a license key or override pdfjs-dist worker source.
2. RPTheme - To customize React PDF viewer’s theme.
3. RPProvider - To configure src of the PDF document and initialize default component states.
4. RPDefaultLayout - To render the default toolbar, including the top bar and sidebar.
5. RPPages - To display all PDF pages.

At the fundamental level, you need three components to render a bare minimum PDF viewer.

• RPConfig - To ensure the license key is set
• RPProvider - To ensure the PDF document (src) is set and load the necessary states
• RPPages - To render all of the PDF pages

Although RPDefaultLayout is not required, it is recommended if you are looking for a ready-to-use toolbar layout.

Here are some common examples:

Basic Setup (Recommended)

If you need to render a PDF document with the default layout.

Example

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

  export default () => (
    <RPConfig licenseKey={...}>
      <RPProvider src={...}>
        <RPDefaultLayout style={{ height: '600px', width: '768px' }}>
          <RPPages />
        </RPDefaultLayout>
      </RPProvider>
    </RPConfig>
  )

Minimal Setup

If you only need basic PDF rendering without the toolbar and sidebar.

Example

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

  export default () => (
    <RPConfig licenseKey={...}>
      <RPProvider src={...}>
        {/* Ensure the container has height and width for proper PDF rendering */}
        <div style={{ height: '600px', width: '768px' }}>
          <RPPages />
        </div>
      </RPProvider>
    </RPConfig>
  )

Custom Theme

If you need to customize the appearance while keeping the default layout.

Example

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

  export default () => (
    <RPConfig licenseKey={...}>
      <RPProvider src={...}>
        <RPTheme
          customVariables={{
            '--rp-toolbar-background': 'red',
            '--rp-text-color': 'yellow'
          }}
        >
          <RPDefaultLayout style={{ height: '600px', width: '768px' }}>
            <RPPages />
          </RPDefaultLayout>
        </RPTheme>
      </RPProvider>
    </RPConfig>
  )