useViewportScale

Reads and sets the viewport scale. Scale 1 means 100%: one user-space unit per CSS pixel.

const [scale, setScale, animateScale] = useViewportScale()

setScale(scale, pivot?)
await animateScale(scale, pivot?)

• scale re-renders the component whenever the scale changes, whatever the source: your controls, the zoom gestures, or an auto fit. During a zoom gesture or an animation it updates once, at the end.
• setScale applies the scale instantly; animateScale zooms smoothly and resolves when the animation ends.
• pivot is the point of the viewport that stays in place while zooming, so the document content under it doesn't move. It is a ViewportPoint, { x, y }, in fractions of the viewport area inside the padding: { x: 0, y: 0 } is the top-left corner and { x: 1, y: 1 } the bottom-right. Defaults to the center, { x: 0.5, y: 0.5 }.
• Both functions throw InvalidInputError unless the scale is a positive finite number. The minScale and maxScale bounds of PdfProviders apply to the zoom gestures only.
• The scale is kept when the Viewport remounts.

Example

import { useViewportScale } from '@sdk-pdf/react'

const TOP_CENTER = { x: 0.5, y: 0 }

function ZoomControls() {
  const [scale, , animateScale] = useViewportScale()

  return (
    <div role="toolbar">
      <button onClick={() => animateScale(scale / 1.25)}>−</button>
      <span>{Math.round(scale * 100)}%</span>
      <button onClick={() => animateScale(scale * 1.25)}>+</button>
      <button onClick={() => animateScale(1, TOP_CENTER)}>100%</button>
    </div>
  )
}

To fit the pages into the viewport instead of setting an absolute scale, see useViewportFitScale and useViewportAutoFitScale.