Skip to main content

useZoom

useZoom(ui?): number

Hook to track the current zoom level of a VisuallyJS UI component. You can use this hook in your templates to conditionally hide/show parts of the UI.

export default function MyComponent(ctx) {

 const zoom = useZoom(ctx.ui)  // (passing in the ctx.ui is optional but if you have it you can save a few CPU cycles)

 return <div>
     {zoom > 1 && <h1>Zoom is large</h1>}
     {zoom <= 1 && <h3>Zoom is small</h3>}
     </div>
}

You can also use to in a standalone component, in conjunction with useSurface:

export default function ZoomViewer() {

 const surface = useSurface()
 const zoom = useZoom(surface)

 return <h1>{zoom.toFixed(2)}</h1>
}

Parameters​

ui?​

BrowserUI

The UI instance to observe - optional, if not provided the hook will resolve a UI via useSurface or usePaper.

Returns​

number

Since​

1.0.4