This is the most straightforward way to load a PDF using @pdf-viewer/react. You simply pass a publicly accessible PDF URL to the viewer component.

This method is ideal when:

• The PDF is hosted on an external server or CDN
• You want to display a static file that doesn’t require user interaction or API processing

Refer to Handling Source of PDF File (URL) for more information.

JSX

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

const DEFAULT_FILE_URL =
  "https://cdn.codewithmosh.com/image/upload/v1721763853/guides/web-roadmap.pdf";

const App = () => {
  return (
    <>
      <p style={{ textAlign: "center" }}>PDF file : {DEFAULT_FILE_URL}</p>
      <RPConfig>
        <RPProvider src={DEFAULT_FILE_URL}>
          <RPDefaultLayout>
            <RPPages />
          </RPDefaultLayout>
        </RPProvider>
      </RPConfig>
    </>
  );
};

export default App;

TSX

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

const DEFAULT_FILE_URL =
  "https://cdn.codewithmosh.com/image/upload/v1721763853/guides/web-roadmap.pdf";

const App : FC = () => {
  return (
    <>
      <p style={{ textAlign: "center" }}>PDF file : {DEFAULT_FILE_URL}</p>
      <RPConfig>
        <RPProvider src={DEFAULT_FILE_URL}>
          <RPDefaultLayout>
            <RPPages />
          </RPDefaultLayout>
        </RPProvider>
      </RPConfig>
    </>
  );
};

export default App;