The RPLayout component is designed to provide a default theme and toolbar, including the top bar and left sidebar for convenience.

At the same time, RPLayout gives you the flexibility to control and customize the components within the toolbar whether you want to shuffle or move them around. For more information on how to customize your toolbar, check out Customize Toolbar.

The RPLayout component’s default height and width are set to 600px and 100% of the parent’s component respectively which can be overridden via the style prop. The dimensions can be configured with absolute values (e.g., 250px) or relative values (e.g., auto, initial or inherit).

Configure the Component’s Dimensions

This example will set the height and width to 100% of the parent’s component and 720px respectively.

import {
  RPConfig,
  RPProvider,
  RPLayout,
  RPPages,
  TopbarDefaultTools,
  LeftSidebarDefaultTools,
} from "@pdf-viewer/react";

// Example of a parent component
const ParentComponent = ({ children }) => {
  return <div style={{ height: "500px" }}>{children}</div>;
};

const AppPdfViewer = () => {
  return (
    <ParentComponent>
      <RPConfig licenseKey={"YOUR_LICENSE_KEY"}>
        <RPProvider src="https://cdn.codewithmosh.com/image/upload/v1721763853/guides/web-roadmap.pdf">
          <RPLayout
            // Override the default height and width
            style={{ height: "100%", width: "720px" }}
            // Show toolbar by Topbar and Left sidebar by default
            toolbar={{
              topbar: { component: <TopbarDefaultTools /> },
              leftSidebar: { component: <LeftSidebarDefaultTools /> },
            }}
          >
            <RPPages />
          </RPLayout>
        </RPProvider>
      </RPConfig>
    </ParentComponent>
  );
};

export default AppPdfViewer;

---

Controlling Toolbar Visibility

You can simply hide the top bar or left sidebar by omitting it from the toolbar configuration.

For example, to hide the left sidebar, just exclude the leftSidebar key:

<RPLayout
  toolbar={{
    topbar: {
      component: <TopbarDefaultTools />
    }
    // The left sidebar will not be rendered
  }}
>

Props

Name	Type	Description
onLayoutWidthChange	(isMobileScreen: boolean, currentWidth: number) => void	Triggered whenever the viewer layout width changes. Provides a flag indicating if the screen is considered mobile and the current width in pixels. Useful for adjusting UI components responsively based on screen size
toolbar	ToolbarProps	The toolbar is an object that consists of a topbar and a leftSidebar. Each part may contain components such as buttons, icons, or tools which can be rearranged or styled easily

Tool Components

Default Top bar and Left Sidebar Tools

These default sets of tools allow you to implement the PDF Viewer with an out-of-the-box toolbar.

Name	Type	Description
LeftSidebarDefaultTools	FC<LeftSidebarDefaultToolProps>	Display the default group icons of the topbar with arranged layout and responsive behavior, allowing customization of icons and slots
TopbarDefaultTools	FC<TopbarDefaultToolProps>	Display the default group icons of the left sidebar with arranged layout, allowing customization of icons and slots

Individual Tools

Each component is exported individually, making them easy to import and use as needed. To fully customize the toolbar and arrange its layout as desired, refer to the Customize Toolbar documentation.

Name	Type	Description
FileDownloadTool	FC<ToolProps>	Allows downloading of the current PDF file and supports icon customization
FileUploadTool	FC<ToolProps>	Able to upload a new PDF file and supports icon customization
FullScreenTool	FC<ToolProps>	Displays the full screen mode for the viewer and supports icon customization
InputPageTool	FC	Displays the input page tool component and allows manual input of page number to navigate
MoreOptionsTool	FC<MoreOptionsProps>	Displays the more options tool component, which shows a menu with various functions such as First Page, Last Page, Rotate, Hand Tool, Dual Page, Scrolling Mode, Document Properties, and more
NextPageTool	FC<ToolProps>	Navigate to the next page of the PDF and supports icon customization
PreviousPageTool	FC<ToolProps>	Navigate to the previous page of the PDF and supports icon customization
PrintTool	FC<ToolProps>	Displays print dialog to print the PDF document and supports icon customization
SearchTool	FC<ToolProps>	Able to search for text inside the PDF document and supports icon customization
ThemeSwitcherTool	FC<ThemeSwitcherToolProps>	Displays the theme switcher tool component, toggles between light and dark themes and supports icon customization
ThumbnailTool	FC<ToolProps>	Shows thumbnail previews of all pages in the PDF and supports icon customization
ZoomInTool	FC<ToolProps>	Zooms into the PDF document view and supports icon customization
ZoomLevelTool	FC<ToolProps>	Displays and optionally selects current zoom level and supports icon customization
ZoomOutTool	FC<ToolProps>	Zooms out of the PDF document view and supports icon customization

RPIcon

Name	Type	Description
lightModeIcon	React.ReactNode	To change the light mode icon when the current state of the theme toggle button is light
darkModeIcon	React.ReactNode	To change the dark mode icon when the current state of the theme toggle button is dark
documentPropertiesIcon	React.ReactNode	To change the icon of the document properties menu
downloadIcon	React.ReactNode	To change the icon of the file download button
dualPageIcon	React.ReactNode	To change the icon of the dual page view mode menu
fullScreenIcon	React.ReactNode	To change the fullscreen icon of the fullscreen button
openFileIcon	React.ReactNode	To change the icon of the file upload button
nextIcon	React.ReactNode	To change the icon of the next page button
pageScrollIcon	React.ReactNode	To change the icon of the page scrolling menu
prevIcon	React.ReactNode	To change the icon of the previous page button
printIcon	React.ReactNode	To change the icon of the print button
rotateClockwiseIcon	React.ReactNode	To change the icon of the rotate clockwise menu
rotateCounterClockwiseIcon	React.ReactNode	To change the icon of the rotate counterclockwise menu
singlePageIcon	React.ReactNode	To change the icon of the single page view mode menu
thumbnailIcon	React.ReactNode	To change the icon of the thumbnail button
verticalScrollIcon	React.ReactNode	To change the icon of the vertical scrolling menu
wrappedScrollIcon	React.ReactNode	To change the icon of the wrapped scrolling menu
zoomInIcon	React.ReactNode	To change the zoom in icon of the zoom UI
zoomOutIcon	React.ReactNode	To change the zoom out icon of the zoom UI

Replace any icon in the toolbar

import {
  RPConfig,
  RPProvider,
  RPLayout,
  RPPages,
  TopbarDefaultTools,
} from "@pdf-viewer/react";

const HeartIcon = (
  <svg width="24" height="24" viewBox="0 0 24 24" fill="red" xmlns="http://www.w3.org/2000/svg">
    <path d="M12 21s-6-4.35-9-7.69C-1 8.07 3.6 2.6 8.44 6.24L12 9l3.56-2.76C20.4 2.6 25 8.07 21 13.31 18 16.65 12 21 12 21z" />
  </svg>
)

const AppPdfViewer = () => {
  return (
    <RPConfig licenseKey={'YOUR_LICENSE_KEY'}>
      <RPProvider src="https://cdn.codewithmosh.com/image/upload/v1721763853/guides/web-roadmap.pdf">
        <RPLayout
          toolbar={{
            topbar: {
              component: (
                <TopbarDefaultTools
                  // Change icon
                  icons={{
                    searchIcon: HeartIcon,
                    downloadIcon: HeartIcon
                  }}
                />
              )
            }
          }}
        >
          <RPPages />
        </RPLayout>
      </RPProvider>
    </RPConfig>
  )
}

export default AppPdfViewer;

RPSlot

Name	Type	Description
documentProperties	boolean	To view the PDF metadata such as title, author, and page count. Set to false to hide the document properties menu
downloadTool	boolean | FC<DownloadToolProps>	To control the download tool display and customization. Set to false to hide the file download button, or provide a custom React component to replace the default file download button.
dropFileZone	boolean | React.ReactNode | React.ComponentType	To customize the display of the drag and drop file zone component. Set to false to hide the drag and drop file zone
fullscreenTool	boolean | FC<FullScreenToolProps>	To control the fullscreen tool’s display and customization. Set to false to hide the button or pass a custom React component to replace it.
jumpNavigationTool	boolean	To control the display of the jump to page UI. Set to false to hide the jump to page UI
openFileTool	boolean | React.FC<OpenFileToolProps>	To control the file upload’s display and customization. Set to false to hide the file upload button or provide a custom React component to replace the default file upload button.
pageNavigationTool	boolean | React.FC<PageNavigationToolProps>	To customize the display of the page navigation UI. Set to false to hide the zoom UI
printTool	boolean | React.FC<PrintToolProps>	To control the print display and customization. Set to false to hide the print button or provide a custom React component to replace the default print button
rotateTool	boolean	To rotate the PDF page clockwise or counterclockwise. Set to false to hide the rotate menu
scrollModeTool	boolean	To change the scroll mode (i.e. a single page and two pages side-by-side. Set to false to hide the view mode menu
searchTool	boolean	To control the display of the search UI. Set to false to hide the search UI
themeSwitcher	boolean | React.FC<DarkModeProps>	To control the theme switcher display and customization. Set to false to hide the theme switcher button. Alternatively, pass a custom React component (compatible with the DarkMode interface) to replace the default theme switcher button.
thumbnailTool	boolean | FC<ThumbnailToolProps>	To customize the display of the thumbnail button. Set to false to hide the thumbnail button
zoomTool	boolean	To customize the display of the zoom UI. Set to false to hide the zoom UI

documentProperties

• To hide the document properties menu, set documentProperties to false within the slots prop

  Example

  <RPLayout
    toolbar={{
      topbar: {
        component: (
          <TopbarDefaultTools
            slots={{ documentProperties: false }}
          />
        )
      }
    }}
  >

downloadTool

• To hide the file download button, set downloadTool to false within the slots prop

  Example

  <RPLayout
    toolbar={{
      topbar: {
        component: (
          <TopbarDefaultTools
            slots={{ downloadTool: false }}
          />
        )
      }
    }}
  >

• To use a custom file download component, define downloadTool as a function component in the slots. This example adds a confirmation flow before initiating the download process.

  Example

  <RPLayout
    toolbar={{
      topbar: {
        component: (
          <TopbarDefaultTools
            slots={{
              downloadTool: ({ download }) => (
                <div
                  onClick={() => {
                    // Show a confirm alert before downloading
                    if (confirm('confirm download')) {
                      download()
                    }
                  }}
                >
                  Download File
                </div>
              )
            }}
          />
        )
      }
    }}
  >

dropFileZone

• To hide the drop file zone tool, set dropFileZone to false within the slots prop

  Example

  <RPLayout
    toolbar={{
      topbar: {
        component: (
          <TopbarDefaultTools
            slots={{ dropFileZone: false }}
          />
        )
      }
    }}
  >

• To use a custom drop zone component, define dropFileZone as a function component in the slots. This example shows a drop zone component with a custom style.

  Example

  <RPLayout
    toolbar={{
      topbar: {
        component: (
          <TopbarDefaultTools
            slots={{
              dropFileZone: () => {
                return (
                  <div
                    // Customize styles of the drop zone
                    style={{
                      backgroundColor: 'blue',
                      height: '100%',
                      width: '100%',
                      color: 'white',
                      textAlign: 'center'
                    }}
                  >
                    <p>Drop Here!</p>
                  </div>
                )
              }
            }}
          />
        )
      }
    }}
  >

fullScreenTool

• To hide the fullscreen tool, set fullScreenTool to false within the slots prop

  Example

  <RPLayout
    toolbar={{
      topbar: {
        component: (
          <TopbarDefaultTools
            slots={{ fullscreenTool: false }}
          />
        )
      }
    }}
  >

• To use a custom fullscreen component, define fullScreenTool as a function component in the slots. This example uses a toggle to display text indicating whether fullscreen mode is active (true) or not (false), instead of an icon.

  Example

  <RPLayout
    toolbar={{
      topbar: {
        component: (
          <TopbarDefaultTools
            slots={{
              fullscreenTool: ({ isFullScreen, toggleFullScreen }) => (
                <div onClick={toggleFullScreen}>{isFullScreen ? '' : 'full screen'}</div>
              )
            }}
          />
        )
      }
    }}
  >

jumpNavigationTool

• To hide the jump to page UI, set jumpNavigationTool to false within the slots prop

  Example

  <RPLayout
    toolbar={{
      topbar: {
        component: (
          <TopbarDefaultTools
            slots={{ jumpNavigationTool: false }}
          />
        )
      }
    }}
  >

openFileTool

• To hide the open file tool, set openFileTool to false within the slots prop

  Example

  <RPLayout
    toolbar={{
      topbar: {
        component: (
          <TopbarDefaultTools
            slots={{ openFileTool: false }}
          />
        )
      }
    }}
  >

• To use a custom open file component, define openFileTool as a function component in the slots. This example demonstrates how to implement a custom open file flow.

  Example

  <RPLayout
    toolbar={{
      topbar: {
        component: (
          <TopbarDefaultTools
            slots={{
              openFileTool: ({ openFile }) => {
                return (
                  <div
                    onClick={() => {
                      // Show a confirm alert before opening a PDF
                      if (confirm('confirm open')) {
                        openFile()
                      }
                    }}
                  >
                    Click to open PDF
                  </div>
                )
              }
            }}
          />
        )
      }
    }}
  >

pageNavigationTool

• To hide the page navigation tool, set pageNavigationTool to false within the slots prop

  Example

  <RPLayout
    toolbar={{
      topbar: {
        component: (
          <TopbarDefaultTools
            slots={{ pageNavigationTool: false }}
          />
        )
      }
    }}
  >

• To use a custom page navigation component, define pageNavigationTool as a function component in the slots. This example allows user to change the current page.

  Example

  <RPLayout
    toolbar={{
      topbar: {
        component: (
          <TopbarDefaultTools
            slots={{
              pageNavigationTool: ({ total, current, nextPage, prevPage }) => (
                <div>
                  <button onClick={prevPage}> {'<'} </button>
                  {current}/{total}
                  <button onClick={nextPage}> {'>'} </button>
                </div>
              )
            }}
          />
        )
      }
    }}
  >

printTool

• To hide the print tool, set printTool to false within the slots prop

  Example

  <RPLayout
    toolbar={{
      topbar: {
        component: (
          <TopbarDefaultTools
            slots={{ printTool: false }}
          />
        )
      }
    }}
  >

• To use a custom print component, define printTool as a function component in the slots. This example demonstrates how to implement a custom print flow.

  Example

  <RPLayout
    toolbar={{
      topbar: {
        component: (
          <TopbarDefaultTools
            slots={{
              printTool: ({ print, setOnComplete, setOnError, setOnProgress }) => {
                // Set up callback for when printing is completed successfully
                useEffect(() => {
                  setOnComplete(() => {
                    console.log('Print Completed!')
                  })
                }, [])
  
                // Set up error handling callback for printing errors
                useEffect(() => {
                  setOnError((error) => {
                    if (error) {
                      console.log('print error:', error)
                    }
                  })
                }, [])
  
                // Set up progress tracking callback to monitor printing progress
                useEffect(() => {
                  setOnProgress((progress) => {
                    console.log('Print progress', progress.percentage, progress.loadedPages)
                  })
                }, [])
  
                return <div onClick={print}>print here!</div>
              }
            }}
          />
        )
      }
    }}
  >

rotateTool

• To hide the rotate tool, set rotateTool to false within the slots prop

  Example

  <RPLayout
    toolbar={{
      topbar: {
        component: (
          <TopbarDefaultTools
            slots={{ rotateTool: false }}
          />
        )
      }
    }}
  >

scrollModeTool

• To hide the scroll mode tool, set scrollModeTool to false within the slots prop

  Example

  <RPLayout
    toolbar={{
      topbar: {
        component: (
          <TopbarDefaultTools
            slots={{ scrollModeTool: false }}
          />
        )
      }
    }}
  >

searchTool

• To hide the search tool, set searchTool to false within the slots prop

  Example

  <RPLayout
    toolbar={{
      topbar: {
        component: (
          <TopbarDefaultTools
            slots={{ searchTool: false }}
          />
        )
      }
    }}
  >

themeSwitcher

• To hide the theme switcher, set themeSwitcher to false within the slots prop

  Example

  <RPLayout
    toolbar={{
      topbar: {
        component: (
          <TopbarDefaultTools
            slots={{ themeSwitcher: false }}
          />
        )
      }
    }}
  >

• To use a custom theme switcher component, define themeSwitcher as a function component in the slots. This example uses a toggle displaying between a sun or a moon icon depending on the current theme.

  Example

  <RPLayout
    toolbar={{
      topbar: {
        component: (
          <TopbarDefaultTools
            slots={{
              // Render a custom theme switcher and
              // Handle component click event to change the state of darkMode
              themeSwitcher: ({ darkMode, setDarkMode }) => (
                <div onClick={() => setDarkMode((prev) => !prev)}>{darkMode ? '🌙' : '☀️'}</div>
              )
            }}
          />
        )
      }
    }}
  >

thumbnailTool

• To hide the thumbnail tool, set thumbnailTool to false within the slots prop

  Example

  <RPLayout
    toolbar={{
      leftSidebar: {
        component: (
          <LeftSidebarDefaultTools
            slots={{ thumbnailTool: false }}
          />
        )
      }
    }}
  >

• To use a custom thumbnail component, define thumbnailTool as a function component in the slots. This example uses a toggle to display text indicating whether thumbnail sidebar is opened (true) or not (false), instead of an icon.

  Example

  <RPLayout
    toolbar={{
      leftSidebar: {
        component: (
          <LeftSidebarDefaultTools
            slots={{
              thumbnailTool: ({ onClick, active }) => (
                <div onClick={onClick}>{active ? 'T' : 't'}</div>
              )
            }}
          />
        )
      }
    }}
  >

zoomTool

• To hide the zoom tool, set zoomTool to false within the slots prop

  Example

  <RPLayout
    toolbar={{
      topbar: {
        component: (
          <TopbarDefaultTools
            slots={{ zoomTool: false }}
          />
        )
      }
    }}
  >

• To use a custom zoom tool component, define zoomTool as a function component in the slots. This example allows user to change the PDF page’s scale with input.

  Example

  <RPLayout
    toolbar={{
      topbar: {
        component: (
          <TopbarDefaultTools
            slots={{
              zoomTool: ({ zoomLevel, setZoomLevel }) => (
                <div>
                  <button onClick={() => setZoomLevel(zoomLevel - 20)}>ZoomOut</button>
                  <span style={{ marginInline: 10 }}>{zoomLevel}</span>
                  <button onClick={() => setZoomLevel(zoomLevel + 20)}>ZoomIn</button>
                </div>
              )
            }}
          />
        )
      }
    }}
  >