Docs
Plugins
Localizations
Examples
Updates
Purchase
Plugins

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`?`boolean`Enable shortcuts2.9.0
`getFullScreenTarget?``Function`Indicate the custom full screen element. See this example3.0.0
`onEnterFullScreen?``Zoom => void`Triggered after entering the full screen mode2.3.1
`onExitFullScreen?``Zoom => void`Triggered after exiting the full screen mode2.3.1
`renderExitFullScreenButton?``Function`Render a custom button to exit the full screen mode. See this example3.0.0
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
`EnterFullScreen``ReactElement`Customizable full screen button2.0.0
`EnterFullScreenButton``ReactElement`The default full screen button2.0.0
`EnterFullScreenMenuItem``ReactElement`The 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
`ExitFullScreenIcon``ReactElement`The exit full screen icon2.0.0
`FullScreenIcon``ReactElement`The full screen icon2.0.0

See also

Changelog

v3.2.0
  • Typo in full screen change event
v3.1.1
  • The full screen button and menu item are disabled on browsers that don't support full screen APIs. It happens on iOS Safari and iOS Chrome, for example.
v3.0.0
  • Add new `renderExitFullScreenButton` option to customize the button to exit the full screen mode
  • Add new `getFullScreenTarget` option to set the full screen element
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
DropGet File