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
).
Configure the Component’s Dimensions
Section titled “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 componentconst 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;
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
Section titled “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)