Zoom to fit the screen after entering the full screen mode

This example demonstrates the usage of the onEnterFullScreen and onExitFullScreen options provided by the Full Screen plugin.
We will zoom to fit the screen after entering and exiting the full screen mode.
import { SpecialZoomLevel, Viewer } from '@react-pdf-viewer/core';
import { defaultLayoutPlugin } from '@react-pdf-viewer/default-layout';
import '@react-pdf-viewer/core/lib/styles/index.css';
import '@react-pdf-viewer/default-layout/lib/styles/index.css';
// Your render function
const defaultLayoutPluginInstance = defaultLayoutPlugin({
toolbarPlugin: {
fullScreenPlugin: {
// Zoom to fit the screen after entering and exiting the full screen mode
onEnterFullScreen: (zoom) => {
zoom(SpecialZoomLevel.PageFit);
},
onExitFullScreen: (zoom) => {
zoom(SpecialZoomLevel.PageFit);
},
},
},
});
return (
<div
style={{
height: '100%',
}}
>
<Viewer fileUrl="/assets/pdf-open-parameters.pdf" plugins={[defaultLayoutPluginInstance]} />
</div>
);
Click the Full Screen button in the toolbar (The sample code)

See also