Double-Tap Zoom

Double-tap (touch) and double-click (mouse) zoom is enabled by default in toggle mode. The gesture zooms to the exact point where the user tapped.

Default behavior

Without any configuration, double-tap:

Zooms in 2x to the tap point if at 1x zoom
Resets to 1x if already zoomed in

// Double-tap works out of the box
const { view } = useZoomPinch({ containerRef })

Configuration

Pass a doubleTap object to customize:

useZoomPinch({
  containerRef,
  doubleTap: {
    mode: "zoomIn", // always zoom in (never reset)
    step: 3, // zoom by 3x instead of 2x
  },
})

Options

Property	Type	Default	Description
`enabled`	`boolean`	`true`	Enable/disable double-tap
`mode`	`"toggle" \| "zoomIn" \| "reset"`	`"toggle"`	Behavior on double-tap
`step`	`number`	`2`	Zoom multiplier

Modes

"toggle" (default) — Smart toggle. If zoom is close to 1x, zooms in by step. If already zoomed, resets to { x: 0, y: 0, zoom: 1 }.

doubleTap: {
  mode: "toggle"
} // or just omit doubleTap entirely

"zoomIn" — Always zooms in by step, anchored to the tap point. Useful for progressive zoom (tap, tap, tap to keep zooming).

doubleTap: { mode: "zoomIn", step: 2 }

"reset" — Always resets to the default view regardless of current zoom level.

doubleTap: {
  mode: "reset"
}

Disabling

Two ways to disable:

// Option 1: pass false
useZoomPinch({ containerRef, doubleTap: false })

// Option 2: enabled flag
useZoomPinch({ containerRef, doubleTap: { enabled: false } })

How it works

The hook tracks pointerup events and detects double-taps when:

Two taps happen within 300ms of each other
The taps are within 25px of each other
The pointer did not move between pointerdown and pointerup (not a drag)

The zoom animation uses easeOut over 300ms, anchored to the tap point (not the container center).