Skip to main content
svelte-pdf-mini

Document & viewing

Zoom

Zoom in and out, pick a fit mode or a level, with eased transitions.

Zoom controls read the viewer from context. Every change eases (unless smoothZoom is off) and keeps the page centred, or the point under the cursor once pages are wider than the view.

Anatomy 

<Zoom.Out />
<Zoom.Select />                <!-- fit modes + steps -->
<Zoom.In />
<Zoom.Mode mode="page-width">Width</Zoom.Mode>
<Zoom.Out />
<Zoom.Select />                <!-- fit modes + steps -->
<Zoom.In />
<Zoom.Mode mode="page-width">Width</Zoom.Mode>

Usage

Zoom.In and Zoom.Out are disabled at the ends of zoomSteps, at the viewer’s minZoom / maxZoom, and while zoomLocked is set; Zoom.Mode exposes data-active and aria-pressed. For a slider, bind it to the viewer: bind:value={() => viewer.zoom, (z) => viewer.zoomTo(z)}.

API reference

Zoom.In

Renders a <button> (or your element via child) and accepts its HTML attributes.

No props of its own besides ref, child and children.

Snippet prop Type
disabled boolean
Data attributes data-pdf-zoom-in

Zoom.Out

Renders a <button> (or your element via child) and accepts its HTML attributes.

No props of its own besides ref, child and children.

Snippet prop Type
disabled boolean
Data attributes data-pdf-zoom-out

Zoom.Mode

Renders a <button> (or your element via child) and accepts its HTML attributes.

Prop Type Default
mode required ZoomMode —
Snippet prop Type
active boolean
Data attributes data-activedata-pdf-zoom-mode

Zoom.Select

Renders a <select> (or your element via child) and accepts its HTML attributes.

Prop Type Default
modes Fit modes offered, in order. Exclude<ZoomMode, 'manual'>[] ['auto', 'page-width', 'page-fit']
labels Labels for fit modes. Partial<Record<ZoomMode, string>> {}
Data attributes data-pdf-zoom-select