usePinchZoom

Hook to handle pinch zoom gestures.

Demo

INFO

The component renders a bordered div element. When pinch zoom gestures are executed in this div, a message is shown inside it with zoom type.

Loading demo…

Show source code

import { useCallback, useRef, useState } from "react"
import { usePinchZoom } from "../../../..";

export const UsePinchZoom = () => {
	const [state, setState] = useState("");
	const ref = useRef<HTMLDivElement>(null);
	const listener = useCallback((_:Event, type: "zoomIn" | "zoomOut") => {
		setState(type === "zoomIn" ? "Zooming in..." : "Zooming out...");
	}, []);
	usePinchZoom({
		listener,
		target: ref
	});

	return (
		<div ref={ref} style={{ margin: '0 auto', width: 300, height: 300, overflow: 'auto', resize: 'both', border: '1px solid lightblue' }}>
			{state}
		</div>
	);
}

Types

UsePinchZoomProps

Parameters accepted by usePinchZoom.

Property	Type	Required	Description
target	RefObject<HTMLElement> \| Window		The target on which pointer events are monitored to detect pinch gestures. Accepts either a React RefObject&lt;HTMLElement&gt; or a direct Window reference. Defaults to window when omitted.
listener	( evt: PointerEvent, type: "zoomIn" \| "zoomOut" ) => void \| Promise<void>	✓	Callback invoked on each pointer move event that constitutes part of a pinch gesture. Receives the triggering {@link PointerEvent} and a direction string: - "zoomIn" — The two pointers are moving apart (expanding gesture). - "zoomOut" — The two pointers are moving together (contracting gesture). May return a Promise for async handlers.

UsePinchZoomResult

Return value of usePinchZoom.

A stable cleanup function that manually removes all pointer event listeners from the target. Calling it is optional — the hook cleans up automatically on unmount — but useful to detach listeners earlier on demand.

export type UsePinchZoomResult = () => void;