RPHorizontalBar | React PDF Documentation

RPHorizontalBar Beta

The RPHorizontalBar display the default group icons of the horizontal bar with an arranged layout by horizontal and responsive behavior, allowing customization of icons and slots.

Props

Name	Type	Description
icons	RPHorizontalBarIcons	Provide properties of the horizontal bar default tool icons
slots	RPHorizontalBarSlots	Provide properties of the horizontal bar default tool slots

RPHorizontalBarIcons

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
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

Change the icon of any tool

import { RPConfig, RPProvider, RPLayout, RPPages, RPHorizontalBar } 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: (
                <RPHorizontalBar
                  // Change icon
                  icons={{
                    searchIcon: HeartIcon,
                    downloadIcon: HeartIcon
                  }}
                />
              )
            }
          }}
        >
          <RPPages />
        </RPLayout>
      </RPProvider>
    </RPConfig>
  )
}
export default AppPdfViewer

More details for Customize Toolbar (New)

RPHorizontalBarSlots

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 page navigation 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
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.
viewModeTool	boolean	To control the display of the view mode. Set to `false` to hide the view mode
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: (
        <RPHorizontalBar
          slots={{ documentProperties: false }}
        />
      )
    }
  }}
>

downloadTool

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

Example

<RPLayout
  toolbar={{
    topbar: {
      component: (
        <RPHorizontalBar
          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: (
        <RPHorizontalBar
          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: (
        <RPHorizontalBar
          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: (
        <RPHorizontalBar
          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: (
        <RPHorizontalBar
          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: (
        <RPHorizontalBar
          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: (
        <RPHorizontalBar
          slots={{ jumpNavigationTool: false }}
        />
      )
    }
  }}
>

openFileTool

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

Example

<RPLayout
  toolbar={{
    topbar: {
      component: (
        <RPHorizontalBar
          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: (
        <RPHorizontalBar
          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: (
        <RPHorizontalBar
          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: (
        <RPHorizontalBar
          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: (
        <RPHorizontalBar
          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: (
        <RPHorizontalBar
          slots={{
            printTool: ({ print, setOnComplete, setOnError, setOnProgress }) => {
              const handlePrint = () => {
                // Set up callback for when printing is completed successfully
                setOnComplete(() => {
                  console.log('Print Completed!')
                })

                // Set up progress tracking callback to monitor printing progress
                setOnProgress((progress) => {
                  console.log(
                    'Print progress',
                    progress.percentage,
                    progress.loadedPages
                  )
                })

                // Set up error handling callback for printing errors
                setOnError((error) => {
                  if (error) {
                    console.log('print error:', error)
                  }
                })

                print()
              }

              return <div onClick={handlePrint}>print here!</div>
            }
          }}
        />
      )
    }
  }}
>

rotateTool

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

Example

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

scrollModeTool

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

Example

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

searchTool

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

Example

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

selectionModeTool

To hide the selection mode tool, set selectionModeTool to false within the slots prop

Example

<RPLayout
  toolbar={{
    topbar: {
      component: (
        <RPHorizontalBar
          slots={{ selectionModeTool: false }}
        />
      )
    }
  }}
>

themeSwitcher

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

Example

<RPLayout
  toolbar={{
    topbar: {
      component: (
        <RPHorizontalBar
          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: (
        <RPHorizontalBar
          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>
            )
          }}
        />
      )
    }
  }}
>

viewModeTool

To hide the view mode tool, set viewModeTool to false within the slots prop

Example

<RPLayout
  toolbar={{
    topbar: {
      component: (
        <RPHorizontalBar
          slots={{ viewModeTool: false }}
        />
      )
    }
  }}
>

zoomTool

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

Example

<RPLayout
  toolbar={{
    topbar: {
      component: (
        <RPHorizontalBar
          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: (
        <RPHorizontalBar
          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>
            )
          }}
        />
      )
    }
  }}
>