Customizing Component

How to change loader image

Method 1 : Override the loader image

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

// Define a loader image as JSX
const LoaderImage = (
  <svg
    width="40px"
    height="40px"
    xmlns="http://www.w3.org/2000/svg"
    viewBox="0 0 200 200"
  >
    <path
      fill="white"
      stroke="white"
      d="m148 84.7 13.8-8-10-17.3-13.8 8a50 50 0 0 0-27.4-15.9v-16h-20v16A50 50 0 0 0 63 67.4l-13.8-8-10 17.3 13.8 8a50 50 0 0 0 0 31.7l-13.8 8 10 17.3 13.8-8a50 50 0 0 0 27.5 15.9v16h20v-16a50 50 0 0 0 27.4-15.9l13.8 8 10-17.3-13.8-8a50 50 0 0 0 0-31.7Zm-47.5 50.8a35 35 0 1 1 0-70 35 35 0 0 1 0 70Z"
    ></path>
  </svg>
);

export const AppPdfViewer = () => {
  return (
    <RPConfig>
      <RPTheme customVariables={{ '--rp-loader-backdrop-color': '#0995EE' }}>
        <RPProvider
          src="https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09-test.pdf"
          loaderImage={LoaderImage}
        >
          <RPDefaultLayout>
            <RPPages/>
          </RPDefaultLayout>
        </RPProvider>
      </RPTheme>
    </RPConfig>
  )
}

🖼️ Result Preview

Method 2 : Fully Customize the Progress Loader

1. Create a Custom Loader Component

import { useDocumentContext } from '@pdf-viewer/react'

export const Loader = () => {
  const { loaderProgress } = useDocumentContext();
  return <>Loading... {loaderProgress} % </>
}

2. Import and Use the Custom Loader in Your Viewer

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

export const AppPdfViewer = () => {
  return (
    <RPConfig>
      <RPTheme customVariables={{ '--rp-loader-backdrop-color': '#0995EE' }}>
        <RPProvider
          src="https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09-test.pdf"
          loaderImage={<Loader/>}
        >
          <RPDefaultLayout>
            <RPPages/>
          </RPDefaultLayout>
        </RPProvider>
      </RPTheme>
    </RPConfig>
  )
}

🖼️ Result Preview