# useViewportScale

Source: https://sdk.pdf.net/docs/v1/reference/useViewportScale



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

```ts
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](https://sdk.pdf.net/docs/v1/reference/PdfProviders) apply to the zoom gestures only.
* The scale is kept when the [Viewport](https://sdk.pdf.net/docs/v1/reference/Viewport) remounts.

## Example [#example]

```tsx
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](https://sdk.pdf.net/docs/v1/reference/useViewportFitScale) and [useViewportAutoFitScale](https://sdk.pdf.net/docs/v1/reference/useViewportAutoFitScale).