Include the default toolbar in the full screen mode

By default, the full screen mode only displays the pages of a PDF document. However, from v3.0.0, the full screen plugin provides the ability to customize the target element that will be shown in the full screen mode.

It comes with the `getFullScreenTarget` option which is a function that accepts a single `pagesContainer` parameter. The parameter represents the DOM element of pages container.

The function needs to returns a DOM element that you would like to see in the full screen mode:

const fullScreenPluginInstance = fullScreenPlugin({
    getFullScreenTarget: (pagesContainer) => {
        // Returns the target element in full screen mode
    },
});

Now, if you are using the default layout plugin then you will see that the layout is organized as the following structure:

<div class="rpv-core__viewer" data-testid="core__viewer">
    <div data-testid="core__inner-container">
        <div class="rpv-default-layout__container">
            <div class="rpv-default-layout__main" data-testid="default-layout__main">
                <!-- The sidebar -->
                <div class="rpv-default-layout__sidebar" data-testid="default-layout__sidebar">...</div>

                <!-- The body -->
                <div class="rpv-default-layout__body" data-testid="default-layout__body">
                    <!-- The toolbar -->
                    <div class="rpv-default-layout__toolbar">...</div>

                    <!-- The pages container -->
                    <div data-testid="core__inner-pages">...</div>
                </div>
            </div>
        </div>
    </div>
</div>

The `pagesContainer` parameter in the `getFullScreenTarget` option is the element that has the `data-testid="core__inner-pages"` attribute in the markup above.

In order to include the toolbar in the full screen mode, we just simply retrieve the element that has the `data-testid="default-layout__body"` attribute or `rpv-default-layout__body` class:

getFullScreenTarget: (pagesContainer) => pagesContainer.closest('[data-testid="default-layout__body"]'),

Last but not least, the full screen button in the toolbar is turned into a button to exit the full screen mode, automatically. So you probably want to remove the exit full screen button at the bottom right corner. It can be done by using the `renderExitFullScreenButton` option:

fullScreenPlugin({
    renderExitFullScreenButton: (props) => <></>,
}),

See the customize the button to exit the full screen mode example for more details.

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

(The sample code)

If you want to have same feature without using the default layout, then here it is:

(The sample code)

Include the default toolbar in the full screen mode

See also