Customize the button to exit the full screen mode

When you click the Full screen button in the toolbar or press the shortcuts (`ctrl + cmd + F` on macOS or `F11` on other operating systems), you will enter the full screen mode. The full screen plugin also displays a button at the bottom right corner that helps you exit the full screen mode.

If you would like to customize that exit button, then you can use the `renderExitFullScreenButton` option. It's a function that has the following syntax:

const fullScreenPluginInstance = fullScreenPlugin(
    renderExitFullScreenButton: (props) => (
        <button onClick={props.onClick}>Exit</button>
    ),
);

It is worth noting that the button should be visible regardless the current page is. We often set a fixed position for the button:

renderExitFullScreenButton: (props) => (
    <div
        style={{
            bottom: '1rem',
            position: 'fixed',
            right: '1rem',
            // Otherwise, the button will be hidden
            zIndex: 1,
        }}
    >
        <button onClick={props.onClick}>Exit</button>
    </div>
),

The usage is the same when you want to use the default layout plugin:

import { defaultLayoutPlugin } from '@react-pdf-viewer/default-layout';

const defaultLayoutPluginInstance = defaultLayoutPlugin({
    toolbarPlugin: {
        fullScreenPlugin: {
            renderExitFullScreenButton: (props) => (
                <div
                    style={{
                        bottom: '1rem',
                        position: 'fixed',
                        right: '1rem',
                        zIndex: 1,
                    }}
                >
                    <buttton onClick={props.onClick}>Exit</buttton>
                </div>
            ),
        },
    },
});

In the following demo, click the Full screen button in the toolbar to enter the full screen mode.

(The sample code)

Customize the button to exit the full screen mode

See also