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

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)

Property	Type	Description	From
`enableShortcuts`?	`boolean`	Enable shortcuts	2.6.0

By default, users can use particular shortcuts to zoom in or zoom out the current document:

Shortcut	Action
`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:

Property	Type	Description	From
`CurrentScale`	`ReactElement`	Show the current scale value	2.0.0
`Zoom`	`ReactElement`	Customizable zoom button	2.0.0
`ZoomIn`	`ReactElement`	Customizable zoom in button	2.0.0
`ZoomInButton`	`ReactElement`	The default zoom in button	2.0.0
`ZoomInMenuItem`	`ReactElement`	The default zoom in menu item	2.5.0
`ZoomOut`	`ReactElement`	Customizable zoom out button	2.0.0
`ZoomOutButton`	`ReactElement`	The default zoom out button	2.0.0
`ZoomOutMenuItem`	`ReactElement`	The default zoom out menu item	2.5.0
`ZoomPopover`	`ReactElement`	The default popover allows to zoom to specific level	2.0.0
`zoomTo`	`Function`	Zoom to specific level	2.4.0

See their usages in the examples below.

3. Register the plugin

<Viewer plugins={[zoomPluginInstance]} />

The `zoom` plugin provides other useful properties as following:

import { ZoomInIcon, ZoomOutIcon } from '@react-pdf-viewer/zoom';

Property	Type	Description	From
`ZoomInIcon`	`ReactElement`	The zoom in icon	2.0.0
`ZoomOutIcon`	`ReactElement`	The zoom out icon	2.0.0

v2.10.1

v2.6.0

v2.4.2

v2.4.0

v2.2.1

v2.0.0