The RPLayout component 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 parent’s component and 720px respectively.

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

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

const AppPdfViewer = () => {
  return (
    <ParentComponent>
      <RPConfig licenseKey="YOUR_LICENSE_KEY">
        <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
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.
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. Each part may contain components such as buttons, icons, or tools which can be rearranged or styled easily

Manage Toolbar Visibility

It’s easy to show default toolbar or hide the top bar and left sidebar. Please refer to Basic Toolbar Usage (RPLayout)