Zoom plugin

The zoom plugin provides a few components to zoom in or zoom out a PDF document. It also allows to customize these components.

Install

npm install '@react-pdf-viewer/zoom';
The zoom plugin is included in the toolbar and default-layout plugins

Usage

  • Import the plugin and styles:
import { zoomPlugin } from '@react-pdf-viewer/zoom';
// Import styles
import '@react-pdf-viewer/zoom/lib/styles/index.css';
  • Create the plugin instance:
const zoomPluginInstance = zoomPlugin(props?: ZoomPluginProps);
The zoomPlugin() function takes an optional ZoomPluginProps parameter that consists of the following property:
PropertyTypeDescriptionFrom
enableShortcutsbooleanEnable shortcuts2.6.0
By default, users can use particular shortcuts to zoom in or zoom out the current document:
ShortcutDescription
ctrl +Zoom in the document
ctrl -Zoom out the document
ctrl 0View the actual size of the document
The plugin instance zoomPluginInstance provides the following properties:
PropertyTypeDescriptionFrom
CurrentScaleReactElementShow the current scale value2.0.0
ZoomReactElementCustomizable zoom button2.0.0
ZoomInReactElementCustomizable zoom in button2.0.0
ZoomInButtonReactElementThe default zoom in button2.0.0
ZoomInMenuItemReactElementThe default zoom in menu item2.5.0
ZoomOutReactElementCustomizable zoom out button2.0.0
ZoomOutButtonReactElementThe default zoom out button2.0.0
ZoomOutMenuItemReactElementThe default zoom out menu item2.5.0
ZoomPopoverReactElementThe default popover allows to zoom to specific level2.0.0
zoomToFunctionZoom to specific level2.4.0
See their usages in the examples below.
  • Finally, register the zoom plugin instance:
<Viewer fileUrl="..." plugins={[zoomPluginInstance]} />

Properties

The zoom plugin provides other useful properties as following:
import { ZoomInIcon, ZoomOutIcon } from '@react-pdf-viewer/zoom';
PropertyTypeDescriptionFrom
ZoomInIconReactElementThe zoom in icon2.0.0
ZoomOutIconReactElementThe zoom out icon2.0.0

Examples