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	RPIcons	Customize the appearance of toolbar icons by providing your own icon components. See RPIcons for the complete list of customizable icons
mobileWidth	number	The default breakpoint for mobile view is 768px, which determines when the component switches to the mobile layout. This value is configurable as needed. For more information, see Mobile View
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.
slots	RPSlots	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 RPSlots for the complete list of customizable slots

RPIcons

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
handSelectionIcon	React.ReactNode	To change the icon of the hand selection menu
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
textSelectionIcon	React.ReactNode	To change the icon of the text selection 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>
  )
}

RPSlots

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
selectionModeTool	boolean	To control the display of the selection mode. Set to `false` to hide the selection mode
sidebarEnable	boolean	To control the display of the sidebar. Set to `false` to hide the sidebar
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
viewModeTool	boolean	To control the display of the view mode. Set to `false` to hide the view mode
zoomTool	boolean \| React.FC<ZoomProps>	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>
  )
}

selectionModeTool

To hide the selection mode tool, set selectionModeTool 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={{
              selectionModeTool: false
            }}
          >
            <RPPages />
          </RPDefaultLayout>
        </RPProvider>
      </RPConfig>
    )
  }

sidebarEnable

To hide the sidebar, set sidebarEnable 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={{
            sidebarEnable: 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>
  )
}

viewModeTool

To hide the view mode tool, set viewModeTool 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={{
            viewModeTool: false
          }}
        >
          <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

RPIcons

Changing of icons in the toolbar

RPSlots

documentProperties

downloadTool

dropFileZone

fullScreenTool

jumpNavigationTool

openFileTool

pageNavigationTool

printTool

rotateTool

scrollModeTool

searchTool

selectionModeTool

sidebarEnable

themeSwitcher

thumbnailTool

viewModeTool

zoomTool