RPDefaultLayout

The RPDefaultLayout component renders the default theme and layout of the React PDF viewer, including the top bar and sidebar.

The RPDefaultLayout 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, 550px or 856px) or relative values (e.g., auto, initial or inherit).

Overriding the Component’s Dimensions

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

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

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

export const AppPdfViewer = () => {
  return (
      <ParentComponent>
        <RPConfig licenseKey={YOUR_LICENSE_KEY}>
          <RPProvider src="https://cdn.codewithmosh.com/image/upload/v1721763853/guides/web-roadmap.pdf">
            <RPDefaultLayout
              // Override the default height and width
              style={{ height: '100%', width: '720px' }}
              icons={{
                zoomInIcon: <>Zoom in</>,
                zoomOutIcon: <>Zoom out</>
              }}
            >
              <RPPages />
            </RPDefaultLayout>
          </RPProvider>
        </RPConfig>
      </ParentComponent>
  )
}

Additionally, the RPDefaultLayout component also provides customization options for the appearance and functionalities of these UI elements through the use of props.

Props

Name	Type	Description
icons	RPIcon	Customize the appearance of toolbar icons by providing your own icon components. See RPIcon for the complete list of customizable icons
slots	RPSlot	Customize the viewer’s interface by replacing default components with your own implementations. This includes toolbar buttons, search functionality, page navigation, and other UI elements. See RPSlot for the complete list of customizable slots

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

This example can be applied to all icons.

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

export const AppPdfViewer = () => {
  return (
    <RPConfig licenseKey={YOUR_LICENSE_KEY}>
      <RPProvider src="https://cdn.codewithmosh.com/image/upload/v1721763853/guides/web-roadmap.pdf">
        <RPDefaultLayout
          icons={{
            zoomInIcon: <>Zoom in</>,
            zoomOutIcon: <>Zoom out</>
          }}
        >
          <RPPages />
        </RPDefaultLayout>
      </RPProvider>
    </RPConfig>
  )
}

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

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

export const AppPdfViewer = () => {
  return (
    <RPConfig licenseKey={YOUR_LICENSE_KEY}>
      <RPProvider src="https://cdn.codewithmosh.com/image/upload/v1721763853/guides/web-roadmap.pdf">
        <RPDefaultLayout
          slots={{
            documentProperties: false
          }}
        >
          <RPPages />
        </RPDefaultLayout>
      </RPProvider>
    </RPConfig>
  )
}

downloadTool

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

Example

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

export const AppPdfViewer = () => {
  return (
    <RPConfig licenseKey={YOUR_LICENSE_KEY}>
      <RPProvider src="https://cdn.codewithmosh.com/image/upload/v1721763853/guides/web-roadmap.pdf">
        <RPDefaultLayout
          slots={{
            downloadTool: false
          }}
        >
          <RPPages />
        </RPDefaultLayout>
      </RPProvider>
    </RPConfig>
  )
}

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

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

export const AppPdfViewer = () => {
  return (
    <RPConfig licenseKey={YOUR_LICENSE_KEY}>
      <RPProvider src="https://cdn.codewithmosh.com/image/upload/v1721763853/guides/web-roadmap.pdf">
        <RPDefaultLayout
          slots={{
            downloadTool: ({ download }) => (
              <div
                onClick={() => {
                  // Show a confirm alert before downloading
                  if (confirm('confirm download')) {
                    download()
                  }
                }}
              >
                Download File
              </div>
            )
          }}
        >
          <RPPages />
        </RPDefaultLayout>
      </RPProvider>
    </RPConfig>
  )
}

dropFileZone

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

Example

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

export const AppPdfViewer = () => {
  return (
    <RPConfig licenseKey={YOUR_LICENSE_KEY}>
      <RPProvider src="https://cdn.codewithmosh.com/image/upload/v1721763853/guides/web-roadmap.pdf">
        <RPDefaultLayout
          slots={{
            dropFileZone: false
          }}
        >
          <RPPages />
        </RPDefaultLayout>
      </RPProvider>
    </RPConfig>
  )
}

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

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

export const AppPdfViewer = () => {
  return (
    <RPConfig>
      <RPProvider src="https://cdn.codewithmosh.com/image/upload/v1721763853/guides/web-roadmap.pdf">
        <RPDefaultLayout
          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>
              )
            }
          }}
        >
          <RPPages />
        </RPDefaultLayout>
      </RPProvider>
    </RPConfig>
  )
}

fullScreenTool

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

Example

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

export const AppPdfViewer = () => {
  return (
    <RPConfig licenseKey={YOUR_LICENSE_KEY}>
      <RPProvider src="https://cdn.codewithmosh.com/image/upload/v1721763853/guides/web-roadmap.pdf">
        <RPDefaultLayout
          slots={{
            fullscreenTool: false
          }}
        >
          <RPPages />
        </RPDefaultLayout>
      </RPProvider>
    </RPConfig>
  )
}

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

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

export const AppPdfViewer = () => {
  return (
    <RPConfig>
      <RPProvider src="https://cdn.codewithmosh.com/image/upload/v1721763853/guides/web-roadmap.pdf">
        <RPDefaultLayout
          slots={{
            fullscreenTool: ({ isFullScreen, toggleFullScreen }) => (
              <div onClick={toggleFullScreen}>{isFullScreen ? '' : 'full screen'}</div>
            )
          }}
        >
          <RPPages />
        </RPDefaultLayout>
      </RPProvider>
    </RPConfig>
  )
}

jumpNavigationTool

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

Example

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

export const AppPdfViewer = () => {
  return (
    <RPConfig>
      <RPProvider src="https://cdn.codewithmosh.com/image/upload/v1721763853/guides/web-roadmap.pdf">
        <RPDefaultLayout
          slots={{
            jumpNavigationTool: false
          }}
        >
          <RPPages />
        </RPDefaultLayout>
      </RPProvider>
    </RPConfig>
  )
}

openFileTool

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

Example

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

export const AppPdfViewer = () => {
  return (
    <RPConfig>
      <RPProvider src="https://cdn.codewithmosh.com/image/upload/v1721763853/guides/web-roadmap.pdf">
        <RPDefaultLayout
          slots={{
            openFileTool: false
          }}
        >
          <RPPages />
        </RPDefaultLayout>
      </RPProvider>
    </RPConfig>
  )
}

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

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

export const AppPdfViewer = () => {
  return (
    <RPConfig licenseKey={YOUR_LICENSE_KEY}>
      <RPProvider src="https://cdn.codewithmosh.com/image/upload/v1721763853/guides/web-roadmap.pdf">
        <RPDefaultLayout
          slots={{
            openFileTool: ({ openFile }) => {
              return (
                <div
                  onClick={() => {
                    // Show a confirm alert before opening a PDF
                    if (confirm('confirm open')) {
                      openFile()
                    }
                  }}
                >
                  Click to open PDF
                </div>
              )
            }
          }}
        >
          <RPPages />
        </RPDefaultLayout>
      </RPProvider>
    </RPConfig>
  )
}

pageNavigationTool

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

Example

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

export const AppPdfViewer = () => {
  return (
    <RPConfig>
      <RPProvider src="https://cdn.codewithmosh.com/image/upload/v1721763853/guides/web-roadmap.pdf">
        <RPDefaultLayout
          slots={{
            pageNavigationTool: false
          }}
        >
          <RPPages />
        </RPDefaultLayout>
      </RPProvider>
    </RPConfig>
  )
}

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

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

export const AppPdfViewer = () => {
  return (
    <RPConfig licenseKey={YOUR_LICENSE_KEY}>
      <RPProvider src="https://cdn.codewithmosh.com/image/upload/v1721763853/guides/web-roadmap.pdf">
        <RPDefaultLayout
          slots={{
            pageNavigationTool: ({ total, current, nextPage, prevPage }) => (
              <div>
                <button onClick={prevPage}> {'<'} </button>
                {current}/{total}
                <button onClick={nextPage}> {'>'} </button>
              </div>
            )
          }}
        >
          <RPPages />
        </RPDefaultLayout>
      </RPProvider>
    </RPConfig>
  )
}

printTool

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

Example

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

export const AppPdfViewer = () => {
  return (
    <RPConfig licenseKey={YOUR_LICENSE_KEY}>
      <RPProvider src="https://cdn.codewithmosh.com/image/upload/v1721763853/guides/web-roadmap.pdf">
        <RPDefaultLayout
          slots={{
            printTool: false
          }}
        >
          <RPPages />
        </RPDefaultLayout>
      </RPProvider>
    </RPConfig>
  )
}

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

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

export const AppPdfViewer = () => {
  return (
    <RPConfig licenseKey={YOUR_LICENSE_KEY}>
      <RPProvider src="https://cdn.codewithmosh.com/image/upload/v1721763853/guides/web-roadmap.pdf">
        <RPDefaultLayout
          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>
            }
          }}
        >
          <RPPages />
        </RPDefaultLayout>
      </RPProvider>
    </RPConfig>
  )
}

rotateTool

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

Example

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

export const AppPdfViewer = () => {
  return (
    <RPConfig>
      <RPProvider src="https://cdn.codewithmosh.com/image/upload/v1721763853/guides/web-roadmap.pdf">
        <RPDefaultLayout
          slots={{
            rotateTool: false
          }}
        >
          <RPPages />
        </RPDefaultLayout>
      </RPProvider>
    </RPConfig>
  )
}

scrollModeTool

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

Example

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

export const AppPdfViewer = () => {
  return (
    <RPConfig licenseKey={YOUR_LICENSE_KEY}>
      <RPProvider src="https://cdn.codewithmosh.com/image/upload/v1721763853/guides/web-roadmap.pdf">
        <RPDefaultLayout
          slots={{
            scrollModeTool: false
          }}
        >
          <RPPages />
        </RPDefaultLayout>
      </RPProvider>
    </RPConfig>
  )
}

searchTool

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

Example

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

export const AppPdfViewer = () => {
  return (
    <RPConfig licenseKey={YOUR_LICENSE_KEY}>
      <RPProvider src="https://cdn.codewithmosh.com/image/upload/v1721763853/guides/web-roadmap.pdf">
        <RPDefaultLayout
          slots={{
            searchTool: false
          }}
        >
          <RPPages />
        </RPDefaultLayout>
      </RPProvider>
    </RPConfig>
  )
}

themeSwitcher

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

Example

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

export const AppPdfViewer = () => {
  return (
    <RPConfig licenseKey={YOUR_LICENSE_KEY}>
      <RPProvider src="https://cdn.codewithmosh.com/image/upload/v1721763853/guides/web-roadmap.pdf">
        <RPDefaultLayout
          slots={{
            themeSwitcher: false
          }}
        >
          <RPPages />
        </RPDefaultLayout>
      </RPProvider>
    </RPConfig>
  )
}

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

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

export const AppPdfViewer = () => {
  return (
    <RPConfig licenseKey={YOUR_LICENSE_KEY}>
      <RPProvider src="https://cdn.codewithmosh.com/image/upload/v1721763853/guides/web-roadmap.pdf">
        <RPDefaultLayout
          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>
            )
          }}
        >
          <RPPages />
        </RPDefaultLayout>
      </RPProvider>
    </RPConfig>
  )
}

thumbnailTool

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

Example

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

export const AppPdfViewer = () => {
  return (
    <RPConfig>
      <RPProvider src="https://cdn.codewithmosh.com/image/upload/v1721763853/guides/web-roadmap.pdf">
        <RPDefaultLayout
          slots={{
            thumbnailTool: false
          }}
        >
          <RPPages />
        </RPDefaultLayout>
      </RPProvider>
    </RPConfig>
  )
}

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

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

export const AppPdfViewer = () => {
  return (
    <RPConfig>
      <RPProvider src="https://cdn.codewithmosh.com/image/upload/v1721763853/guides/web-roadmap.pdf">
        <RPDefaultLayout
          slots={{
            thumbnailTool: ({ onClick, active }) => (
              <div onClick={onClick}>{active ? 'T' : 't'}</div>
            )
          }}
        >
          <RPPages />
        </RPDefaultLayout>
      </RPProvider>
    </RPConfig>
  )
}

zoomTool

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

Example

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

export const AppPdfViewer = () => {
  return (
    <RPConfig>
      <RPProvider src="https://cdn.codewithmosh.com/image/upload/v1721763853/guides/web-roadmap.pdf">
        <RPDefaultLayout
          slots={{
            zoomTool: false
          }}
        >
          <RPPages />
        </RPDefaultLayout>
      </RPProvider>
    </RPConfig>
  )
}

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

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

export const AppPdfViewer = () => {
  return (
    <RPConfig licenseKey={YOUR_LICENSE_KEY}>
      <RPProvider src="https://cdn.codewithmosh.com/image/upload/v1721763853/guides/web-roadmap.pdf">
        <RPDefaultLayout
          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>
            )
          }}
        >
          <RPPages />
        </RPDefaultLayout>
      </RPProvider>
    </RPConfig>
  )
}

RPDefaultLayout

Overriding the Component’s Dimensions

Props

RPIcon

Changing of icons in the toolbar

RPSlot

documentProperties

downloadTool

dropFileZone

fullScreenTool

jumpNavigationTool

openFileTool

pageNavigationTool

printTool

rotateTool

scrollModeTool

searchTool

themeSwitcher

thumbnailTool

zoomTool