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`?`boolean`Enable 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 0`View the actual size of the document
The plugin instance `zoomPluginInstance` provides the following properties:
PropertyTypeDescriptionFrom
`CurrentScale``ReactElement`Show the current scale value2.0.0
`Zoom``ReactElement`Customizable zoom button2.0.0
`ZoomIn``ReactElement`Customizable zoom in button2.0.0
`ZoomInButton``ReactElement`The default zoom in button2.0.0
`ZoomInMenuItem``ReactElement`The default zoom in menu item2.5.0
`ZoomOut``ReactElement`Customizable zoom out button2.0.0
`ZoomOutButton``ReactElement`The default zoom out button2.0.0
`ZoomOutMenuItem``ReactElement`The default zoom out menu item2.5.0
`ZoomPopover``ReactElement`The default popover allows to zoom to specific level2.0.0
`zoomTo``Function`Zoom 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
`ZoomInIcon``ReactElement`The zoom in icon2.0.0
`ZoomOutIcon``ReactElement`The zoom out icon2.0.0

See also

Changelog

v2.10.1
  • Add new `levels` option to the `Zoom` and `ZoomPopver`
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