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';
The full-screen plugin is included in the toolbar and default-layout plugins

Usage

1. 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';
2. Create the plugin instance
const fullScreenPluginInstance = fullScreenPlugin(props?: FullScreenPluginProps);
The fullScreenPlugin() function takes a FullScreenPluginProps parameter that consists of the following properties:
(? denotes an optional property)
PropertyTypeDescriptionFrom
enableShortcuts?booleanEnable shortcuts2.9.0
onEnterFullScreen?Zoom => voidTriggered after entering the full screen mode2.3.1
onExitFullScreen?Zoom => voidTriggered after exiting the full screen mode2.3.1
By default, the shortcuts are enabled. Users can press ctrl + cmd + F (on macOS) or F11 (on other operating systems) to enter the full screen mode.
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
3. Register the plugin
Finally, register the full-screen plugin instance:
<Viewer 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

See also

Changelog

v2.9.0
  • Support shortcuts
v2.3.1
  • Provide new callbacks (onEnterFullScreen and onExitFullScreen) that are triggered after entering and exiting the full screen mode
v2.0.0
  • First release