React PDF Kit 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 */}
  <RPTheme>              {/* Manage theming and styling (optional) */}
    <RPProvider>         {/* Handle PDF document loading and state */}
      <RPLayout toolbar> {/* Provide the default toolbar structure */}
        <RPPages />      {/* Render the actual PDF content */}
      </RPLayout>
    </RPProvider>
  </RPTheme>
</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 component’s theme
3. RPProvider - To configure src of the PDF document and initialize default component states.
4. RPLayout - To render the toolbar, including the top bar and sidebar
5. RPPages - To display all PDF pages.
6. RPHorizontalBar - (optional) To display the tools of the horizontal bar.
7. RPVerticalBar - (optional) To display the tools of the horizontal bar.

For custom toolbar items, RPButton and RPTooltip are available for consistent styling.

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 RPLayout 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, RPLayout, RPPages } from '@react-pdf-kit/viewer'

  export default () => (
    <RPConfig licenseKey={...}>
      <RPProvider src={...}>
        <RPLayout toolbar>
          <RPPages />
        </RPLayout>
      </RPProvider>
    </RPConfig>
  )

Minimal Setup

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

Example

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

  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, RPLayout, RPPages } from '@react-pdf-kit/viewer'

  export default () => (
    <RPConfig licenseKey={...}>
      <RPTheme
        customVariables={{
          '--rp-toolbar-background': 'red',
          '--rp-text-color': 'yellow'
        }}
      >
        <RPProvider src={...}>
          <RPLayout toolbar>
            <RPPages />
          </RPLayout>
        </RPProvider>
      </RPTheme>
    </RPConfig>
  )