Custom renderer in react-pdf

[hemangi-weybee]

How to use Custom Renderer? I want to render page in image tag not in canvas.

import CustomLoader from '@/components/CustomLoader';

import React, { useEffect, useRef, useState } from 'react';
import { Document, Page, pdfjs } from 'react-pdf';

const CustomPDFViewer = () => {

const pdfRef = useRef();
const [numPages, setNumPages] = useState(null);
const onDocumentLoadSuccess = ({ numPages }) => {
setNumPages(numPages);
};

const MyCustomRenderer = (props, context) => {
console.log(props, 'MyCustomRenderer props');
console.log(context, 'MyCustomRenderer context');
return

{/* I want to access the page here */}

;
};

useEffect(() => {
pdfjs.GlobalWorkerOptions.workerSrc = //cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjs.version}/pdf.worker.js;
}, []);

return (
<>

<Document
ref={pdfRef}
options={{
httpHeaders: {
'Access-Control-Allow-Origin': '*',
}
}}
loading={<SkeletonLoader height={'100vh'} />}
className={'pdf-doc'}
file={''sample.pdf"}
onLoadError={(e) => console.log(e, 'error')}
onLoadSuccess={onDocumentLoadSuccess}>
{Array.from({ length: numPages }, (_, i) => (
<Page
loading={}
pageNumber={i + 1}
key={i + 1}
renderMode="custom"
customRenderer={MyCustomRenderer}
renderAnnotationLayer={false}
renderTextLayer={false}>

))}

</>
);
};

export default CustomPDFViewer;

[wojtekmaj]

Since you still need to use canvas for initial rendering, here's what I would modify the CustomRenderer included in the test suite to do what you want:

import { useEffect, useMemo, useRef } from 'react';
import invariant from 'tiny-invariant';
import { usePageContext } from 'react-pdf';

import type { RenderParameters } from 'pdfjs-dist/types/src/display/api.js';

export default function CustomRenderer() {
  const pageContext = usePageContext();

  invariant(pageContext, 'Unable to find Page context.');

  const { _className, page, rotate, scale } = pageContext;

  invariant(page, 'Attempted to render page canvas, but no page was specified.');

  const imageElement = useRef<HTMLImageElement>(null);

  const viewport = useMemo(
    () => page.getViewport({ scale, rotation: rotate }),
    [page, rotate, scale],
  );

  function drawPageOnImage() {
    if (!page) {
      return;
    }

    const { current: image } = imageElement;

    if (!image) {
      return;
    }

    const canvas = document.createElement('canvas');
    canvas.width = viewport.width;
    canvas.height = viewport.height;

    const renderContext: RenderParameters = {
      canvasContext: canvas.getContext('2d', { alpha: false }) as CanvasRenderingContext2D,
      viewport,
    };

    const cancellable = page.render(renderContext);
    const runningTask = cancellable;

    cancellable.promise
      .then(() => {
        image.src = canvas.toDataURL();
      })
      .catch(() => {
        // Intentionally empty
      });

    return () => {
      runningTask.cancel();
    };
  }

  useEffect(drawPageOnImage, [imageElement, page, viewport]);

  return (
    <img
      className={`${_className}__image`}
      height={viewport.height}
      ref={imageElement}
      width={viewport.width}
    />
  );
}

Cheers!

[wojtekmaj]

BTW, you're using options incorrectly and setting pdfjsWorker in useEffect incorrectly, see README.