Skip to content
Logo dark Logo

Mobile View

React PDF is designed to resize the RPDefaultLayout component’s container responsively. By default, it uses a width of 768px as the breakpoint for mobile view.

An image of how React PDF will be displayed on a mobile screen

To customize this breakpoint, you can set the mobileWidth prop in the RPDefaultLayout component to your preferred width (in pixels). This allows you to define when the component should switch to the mobile layout.

import { RPConfig, RPTheme, RPProvider, RPDefaultLayout, RPPages } from '@pdf-viewer/react'


export const AppPdfViewer = () => (
  <RPConfig>
    <RPProvider src="https://cdn.codewithmosh.com/image/upload/v1721763853/guides/web-roadmap.pdf">
      <RPTheme>
        {/* Set the mobile responsive breakpoint to 500px */}
        <RPDefaultLayout style={{ maxWidth: '100%' }} mobileWidth={500}>
          <RPPages />
        </RPDefaultLayout>
      </RPTheme>
    </RPProvider>
  </RPConfig>
)

If you want to prevent React PDF from triggering a view change, you can set the mobileWidth to 0.

import { RPConfig, RPTheme, RPProvider, RPDefaultLayout, RPPages } from '@pdf-viewer/react'


export const AppPdfViewer = () => (
  <RPConfig>
    <RPTheme>
      <RPProvider src="https://cdn.codewithmosh.com/image/upload/v1721763853/guides/web-roadmap.pdf">
        {/* Set the mobile responsive breakpoint to 0px */}
        <RPDefaultLayout mobileWidth={0}>
          <RPPages />
        </RPDefaultLayout>
      </RPProvider>
    </RPTheme>
  </RPConfig>
)

Remark: Options, except for themeSwitcher, on the right side of the top bar are automatically grouped under the More Options.