# useViewportFitScale

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



Returns a function that calculates the scales fitting the pages into the viewport, for "fit width" and "fit page" controls.

```ts
const getFitScale = useViewportFitScale()

const { fitWidthScale, fitHeightScale } = getFitScale()
```

* `fitWidthScale` fits the widest page into the viewport width; `fitHeightScale` fits the tallest page into its height. Both account for the theme's `viewportPadding`.
* The result reflects the viewport size at the moment of the call, so call it inside the handler rather than caching the value.
* When the sizes are unavailable (no document, or the viewport is not mounted), both scales fall back to 1.

## Example [#example]

```tsx
import { useViewportFitScale, useViewportScale } from '@sdk-pdf/react'

function FitWidthButton() {
  const [, setScale] = useViewportScale()
  const getFitScale = useViewportFitScale()

  return <button onClick={() => setScale(getFitScale().fitWidthScale)}>Fit width</button>
}
```