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

1. Import the plugin and styles
import { zoomPlugin } from '@react-pdf-viewer/zoom';
// Import styles
import '@react-pdf-viewer/zoom/lib/styles/index.css';
2. Create the plugin instance
const zoomPluginInstance = zoomPlugin(props?: ZoomPluginProps);
The zoomPlugin() function takes an optional ZoomPluginProps parameter that consists of the following property:
(? denotes an optional property)
PropertyTypeDescriptionFrom
enableShortcuts?booleanEnable 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.
3. Register the plugin
Register the zoom plugin instance:
<Viewer 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

See also

Changelog

v2.6.0
  • Enable or disable shortcuts via the enableShortcuts option
v2.4.2
  • Support shortcuts
v2.4.0
  • Exposes the zoomTo function
v2.2.1
  • Keep the current page and scroll position after zooming the document
v2.0.0
  • First release