Full Screen plugin

The full-screen plugin provides a button that can be used to view the PDF document in full screen mode. It is possible to customize the button as well.

Install

npm install '@react-pdf-viewer/full-screen';

Usage

  • Import the plugin and styles:
import { fullScreenPlugin } from '@react-pdf-viewer/full-screen';

// Import styles
import '@react-pdf-viewer/full-screen/lib/styles/index.css';
  • Create the plugin instance:
const fullScreenPluginInstance = fullScreenPlugin(props?: FullScreenPluginProps);

The fullScreenPlugin() function takes a FullScreenPluginProps parameter that consists of the following properties:

PropertyTypeDescriptionFrom
onEnterFullScreen?Zoom => voidTriggered after entering the full screen mode2.3.1
onExitFullScreen?Zoom => voidTriggered after exiting the full screen mode2.3.1

where Zoom is the type defined as

import { SpecialZoomLevel } from '@react-pdf-viewer/core';

type Zoom = (scale: number | SpecialZoomLevel) => void;

The plugin instance fullScreenPluginInstance provides the following properties:

PropertyTypeDescriptionFrom
EnterFullScreenReactElementCustomizable full screen button2.0.0
EnterFullScreenButtonReactElementThe default full screen button2.0.0
EnterFullScreenMenuItemReactElementThe default full screen menu item2.5.0
  • Finally, register the full-screen plugin instance:
<Viewer
    fileUrl='...'
    plugins={[
        fullScreenPluginInstance,
    ]}
/>

Properties

The full-screen plugin provides other useful properties as following:

import { ExitFullScreenIcon, FullScreenIcon } from '@react-pdf-viewer/full-screen';
PropertyTypeDescriptionFrom
ExitFullScreenIconReactElementThe exit full screen icon2.0.0
FullScreenIconReactElementThe full screen icon2.0.0

Examples