The RPVerticalBar display the default group icons of the vertical bar with an arranged layout by vertical, allowing customization of icons and slots.

Props

Name	Type	Description
icons	RPVerticalBarIcons	Provide properties of the vertical bar default tool icons
slots	RPVerticalBarSlots	Provide properties of the vertical bar default tool slots

RPVerticalBarIcons

Name	Type	Description
thumbnailIcon	React.ReactNode	To change the icon of the thumbnail button

Change the icon of any tool

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

More details for Customize Toolbar (New)

RPVerticalBarSlots

Name	Type	Description
thumbnailTool	boolean | FC<ThumbnailToolProps>	To customize the display of the thumbnail button. Set to false to hide the thumbnail button

thumbnailTool

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

  Example

  <RPLayout
    toolbar={{
      leftSidebar: {
        component: (
          <RPVerticalBar
            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: (
          <RPVerticalBar
            slots={{
              thumbnailTool: ({ onClick, active }) => (
                <div onClick={onClick}>{active ? 'T' : 't'}</div>
              )
            }}
          />
        )
      }
    }}
  >