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:
- RPConfig - To add a license key or override
pdfjs-dist
worker source. - RPTheme - To customize React PDF’s theme.
- RPProvider - To configure
src
of the PDF document and initialize default component states. - RPDefaultLayout - To render the default toolbar, including the top bar and sidebar.
- 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 setRPProvider
- To ensure the PDF document (src
) is set and load the necessary statesRPPages
- 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> <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> )