In this case, you can load a PDF that’s included in your project by referencing a static path, such as /sample.pdf.

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

While you can load from other internal paths like /assets/pdf/guide.pdf, for simplicity, this example will use a file from the public/ directory.

JSX

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

// Adjust the path as needed
const INTERNAL_PDF_PATH = "/ECMAScript_annotated.pdf";

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

TSX

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

// Adjust the path as needed
const INTERNAL_PDF_PATH = "/ECMAScript_annotated.pdf";

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