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.

See also