Skip to content

BasePdfViewer ​

Viewer to render a PDF with multiple pages. Optional render with a higher resolution for zooming, e.g. in BaseMediaCarousel.

Lifecycle and integration notes:

  • Uses lazy-loading (via useElementObserver) to load only when entering the viewport.
  • Supports pausing and resuming rendering via the exposed stopRendering and resumeRendering methods, enabling integration with parent components.

Props ​

Prop nameDescriptionTypeValuesDefault
srcpath or URL to the PDF file to displaystring-
initialWidthdefault target width (in pixels) used when zoom is disablednumber-1000
zoomwhether to render pages at a higher "zoomWidth" for better detailboolean-true
zoomWidthtarget width (in pixels) used when zoom is enablednumber-2500

Events ​

Event namePropertiesDescription
errorundefined boolean - undefinedevent triggered when pdfjs fails to render the PDF
initializedundefined boolean - undefinedevent triggered when pdfjs lib is loaded and PDF is loaded
Note: needed to toggle the BaseRangeSlider in BaseMediaCarousel

Expose ​

stopRendering ​

Function to stop any further rendering of PDF pages.
The lastRenderedPage state is preserved so rendering can resume later.

resumeRendering ​

Function to render the remaining PDF pages.


Demo ​

Parse and render PDFs pages.
See also the implementation in BaseMediaCarousel