Skip to content

Components

React PDF 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’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:

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>
<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>
<RPPages />
</RPDefaultLayout>
</RPTheme>
</RPProvider>
</RPConfig>
)