Skip to content
Logo dark Logo

Basic Toolbar Usage

Default Toolbar

React PDF provides a default UI toolbar (top bar and sidebar) which you can readily use without much customization. The Viewer will display the default toolbar when the RPDefaultLayout component is used.

<RPConfig>
  <RPProvider src="YOUR_PDF_FILE">
    <RPDefaultLayout>
      <RPPages />
    </RPDefaultLayout>
  </RPProvider>
</RPConfig>
React PDF Viewer for Basic Toolbar Usage - Default

Show/Hide Toolbar and Left Sidebar

Change visibility of Toolbar

To show or hide, you can simply use or not use the RPDefaultLayout component respectively. This feature provides flexibility for your users to customize the interface based on your needs or preferences.

<RPConfig>
  <RPProvider src="YOUR_PDF_FILE">
    {/* <RPDefaultLayout> */}
    <RPPages />
    {/* </RPDefaultLayout> */}
  </RPProvider>
</RPConfig>
Example of a top bar and left sidebar is hidden - React PDF Viewer

Change visibility of Left Sidebar

The sidebarEnable is a property under RPSlot that to control the visibility of the left sidebar.

To hide the left sidebar without hiding the top bar, use the following setting:

<RPConfig>
  <RPProvider src="YOUR_PDF_FILE">
    <RPDefaultLayout
      slots={{
        sidebarEnable: false
      }}
    >
      <RPPages />
    </RPDefaultLayout>
  </RPProvider>
</RPConfig>
Example of a left sidebar is hidden - React PDF Viewer

Show/Hide Icons on Top Bar

Change visibility of Each Icon

You can easily control the visibility of top bar icons in React PDF viewer by toggling their respective settings. Use the RPSlot prop to specify which icons should appear on the top bar.

Here’s how you can configure the top bar:

<RPConfig>
  <RPProvider src="YOUR_PDF_FILE">
    <RPDefaultLayout
      slots={{
        // Top bar: left
        searchTool: false,
        pageNavigationTool: false,
        // Top bar: center
        zoomTool: false,
        // Top bar: right
        themeSwitcher: false,
        openFileTool: false,
        downloadTool: false,
        printTool: false,
        fullscreenTool: false,
        // Left Sidebar: thumbnail
        thumbnailTool: false,
      }}
    >
      <RPPages />
    </RPDefaultLayout>
  </RPProvider>
</RPConfig>
Example of each icon hidden - React PDF Viewer

Remark: An icon from the left sidebar can be hidden the same way.

For a full list of available toolbar options and their descriptions, see the RPDefault Layout Component.