Skip to content
RPLayout Beta

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

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;

NameTypeDescription
mobileWidthnumberThe 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) => voidTriggered 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
toolbarboolean | ToolbarPropsThe 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

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