useViewportFitScale

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

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

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

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

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