Example: 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)

Related example