0

I have an issue while using '@react-pdf-viewer/core'..

Is there any methods to make the height of the viewer dynamic after setRenderRange the pdf?

Please allow me to use this image to explain.. =) enter image description here

So no. 1 is, where the last page ends (I only want to show the first 3 pages..) No. 2 is the scroll bar still showing for 30 pages.. No. 3 is the value of the height although i have set the render range..

import { useCallback } from 'react';
import { Viewer, Worker } from '@react-pdf-viewer/core';
import '@react-pdf-viewer/core/lib/styles/index.css';


const ReactPDFViewer = () => {
  const setRenderRange = useCallback((visiblePagesRange) => {
    return {
      startPage: visiblePagesRange.startPage,
      endPage: visiblePagesRange.endPage - (visiblePagesRange.numPages - 2),
    };
  }, []);

  return (
    <div>
      <Worker workerUrl="https://unpkg.com/pdfjs-dist@3.4.120/build/pdf.worker.min.js">
        <Viewer
          fileUrl='/assets/example.pdf'
          setRenderRange={setRenderRange}
        />
      </Worker>
    </div >)
}

export default ReactPDFViewer;

I tried to set renderPage height from this reference: https://react-pdf-viewer.dev/docs/options/

But it's only change the each of pages, not the container..

I need to make the container height fits to only the 3 pages that I have set before..

0 Answers0