Founding price: $35, then $79.99 after 23:59 UTC on 4 November, then $79.99
Get ProA zoom and pan container for maps, diagrams and photos: pinch, double tap, Ctrl or Cmd plus wheel, drag, +/-/0 keys and on-screen buttons, with bounds so content never leaves the box.
This item has no props to tune. Use the lens above to change theme, density, direction and more.
Use it for content whose detail matters more than the layout: maps, floor plans, charts, product photos, scanned documents.
Do not use it for ordinary page content (it disables browser pinch inside the box). For a photo gallery with swiping use Image Viewer.
import { PinchZoom, type PinchZoomHandle } from "@/components/ui/pinch-zoom"<PinchZoom label="Floor plan" className="h-96">
<img src="/plan.png" alt="Floor plan of level 2" />
</PinchZoom>| Part | Prop | Type | Default | Description |
|---|---|---|---|---|
PinchZoom | label | string | required | Accessible name of the area. |
PinchZoom | minScale / maxScale | number | 1 / 5 | Zoom limits. |
PinchZoom | doubleTapScale | number | 2.5 | Scale of a double tap. |
PinchZoom | onScaleChange | (scale: number) => void | - | Called when the zoom changes (use it to disable swipes at scale 1). |
PinchZoom | controls | boolean | true | Show the zoom buttons. |
PinchZoom | ref | PinchZoomHandle | - | zoomIn(), zoomOut(), reset(), scale(). |
The component ships with a Testing Library test (pinch-zoom.test.tsx). jsdom has no touch or layout, so the test drives the component through its keyboard and pointer-free paths and checks roles, names and state.