How to Replace Syncfusion React PDF Viewer Zoom with Native Browser and Device Zoom (All Platforms)

Hi,

I'm currently working on a project using Syncfusion's React PDF Viewer (@syncfusion/ej2-react-pdfviewer). While it works great, I need to disable its built-in zoom functionality and instead fully rely on native browser/device zoom behaviors for a consistent experience across all platforms (browsers, Android, iOS, PCs, etc.).


Goals:

1. Completely disable Syncfusion's zoom logic (zoom controls, pinch-to-zoom handlers, and any restrictions it imposes).

2. Allow native browser zoom APIs (e.g. pinch-to-zoom on mobile devices) to seamlessly work without conflicts.

What I Tried:

- Disabled Magnification service/plugin 

- Disabled Syncfusion's zoom logic using restrictZoomRequest.

- Captured zoom-related (zoomChange trigger) events like resize, window.devicePixelRatio, etc. to simulate responsiveness.

However, this approach doesn't feel native enough and has some limitations on mobile pinch-to-zoom. I suspect Syncfusion's underlying logic is still interfering.


Questions:

1. How can I completely disable Syncfusion's zoom mechanisms (including touch and desktop zoom handlers)?



1 Reply

PA Priyadharshini Annamalai Syncfusion Team November 29, 2024 06:46 AM UTC

Hi 


In line with your requirements, we have provided a sample to disable the zoom mechanisms. Please test this sample and let us know if you encounter any issues. Your feedback will assist us in further analyzing the matter and providing the necessary support.


Sample: Jgykej (forked) - StackBlitz


Regards,

Priyadharshini


Loader.
Up arrow icon