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 name	Description	Type	Values	Default
src	path or URL to the PDF file to display	string	-
initialWidth	default target width (in pixels) used when zoom is disabled	number	-	1000
zoom	whether to render pages at a higher "zoomWidth" for better detail	boolean	-	true
zoomWidth	target width (in pixels) used when zoom is enabled	number	-	2500

Events

Event name	Properties	Description
error	undefined boolean - undefined	event triggered when pdfjs fails to render the PDF
initialized	undefined boolean - undefined	event 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