Read the zoom scale back
Tap the page to reveal the toolbar, then pinch the page with two fingers — on a touch screen, or through the device toolbar of a browser’s developer tools. The readout follows the pinch, and “Reset zoom” returns the spread to the size its fit mode gives it. A double tap still snaps the page to fit-to-width, as it does in every other demo.
Neither control comes from the library. The viewer ships no zoom UI at all: it carries the scale as a read-only zoomScale on useViewerContext(), which is 1 while the spread rests at the size its fit mode gives it, and one write operation, resetZoom(), which clears the scale and the pan offset together. Everything above is built from those two, so a reader that wants a percentage badge, a disabled control, or a reset button does not have to read the --pcv-zoom-scale custom property back out of the DOM.
The scale belongs to the spread rather than to the reader. Turning the page returns it to 1, and so does picking another page-fit mode from the buttons at the end of the toolbar, because the gesture was made against the size the previous mode gave the page. Zooming in and out programmatically stays out of the API; the pinch and the double tap are what change the scale.
Source code
1import * as ComicViewer from "@publira/comic-viewer";23const ZoomStatus = () => {4 const { resetZoom, zoomScale } = ComicViewer.useViewerContext();56 return (7 <div>8 <output aria-label="Zoom scale">{Math.round(zoomScale * 100)}%</output>9 <button disabled={zoomScale === 1} onClick={resetZoom} type="button">10 Reset zoom11 </button>12 </div>13 );14};1516export const Reader = ({ pages }) => (17 <ComicViewer.Root pages={pages}>18 <ComicViewer.Viewport />19 <ComicViewer.Toolbar>20 <ZoomStatus />21 <ComicViewer.PageProgress>22 <ComicViewer.PageProgressSlider />23 <ComicViewer.PageStatus />24 </ComicViewer.PageProgress>25 <div role="group" aria-label="Page fit">26 <ComicViewer.PageFitModeToggle mode="height" />27 <ComicViewer.PageFitModeToggle mode="width" />28 <ComicViewer.PageFitModeToggle mode="actual" />29 </div>30 </ComicViewer.Toolbar>31 <ComicViewer.PageNavigation />32 </ComicViewer.Root>33);