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';

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();

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
ZoomOutReactElementCustomizable zoom out button2.0.0
ZoomOutButtonReactElementThe default zoom out button2.0.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