The current pdf zoom state and actions.
const { zoom, zoomIn, zoomOut, canZoomIn, fitToWidth } = usePdfZoom();
return (
<>
<button onClick={() => zoomOut()}>−</button>
<span>{Math.round(zoom * 100)}%</span>
<button onClick={() => zoomIn()} disabled={!canZoomIn}>+</button>
<button onClick={() => fitToWidth()}>Fit width</button>
</>
);
Current zoom level and the controls for changing it.
Re-renders on every pan and zoom, so keep it in a small component (a zoom toolbar) rather than high in the tree.