The RPLayout component in React PDF Kit 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 React PDF Viewer parent’s component and 720px respectively.

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

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

const AppPdfViewer = () => {
  return (
    <ParentComponent>
      <RPConfig licenseKey="YOUR_DOMAIN_TOKEN">
        <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
          >
            <RPPages />
          </RPLayout>
        </RPProvider>
      </RPConfig>
    </ParentComponent>
  );
};

export default AppPdfViewer;

---

Props

Name	Type	Description
dropFileZone	boolean | React.ReactNode | React.ComponentType	(optional) To customize the display of the drag and drop file zone component. Set to false to hide the drag and drop file zone.
mobileWidth	number	The default breakpoint for mobile view is 768px, which determines when the React PDF component switches to the mobile layout. This value is configurable as needed.
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	boolean | ToolbarProps	The toolbar is a boolean or an object that consists of a topbar and a leftSidebar. Use RPHorizontalBar or RPVerticalBar to customize icons, slots, and layout.

Manage Toolbar Visibility

The top bar and the left sidebar of the default toolbar can be configured to show or hide independently. Refer to Basic Toolbar Usage for more information.

Customize the Toolbar

RPLayout component also gives you the flexibility to customize the components within the toolbar whether you want to shuffle or move them around.

To customize the top bar or left sidebar (icons, slots, order, or styling), use the provided components:

• RPHorizontalBar - customize the horizontal top bar (zoom, navigation, view mode, search, and more).
• RPVerticalBar - customize the vertical left sidebar (thumbnails and other tools).

Use them inside the toolbar prop (topbar.component and leftSidebar.component) for full control.

For more details on how to customize the toolbar, see Customize Toolbar.