usePinchZoom

1// Copyright (c) 2026 raouf.codes - Azemmur
2 
3'use client';
4import { useEffect, useRef } from 'react';
5 
6export type UsePinchZoomOptions = {
7  elementRef: React.RefObject<HTMLElement | null>;
8  onZoom: (zoom: number) => void;
9  minZoom?: number;
10  maxZoom?: number;
11  initialZoom?: number;
12};
13 
14function getDistance(touches: TouchList): number {
15  if (touches.length < 2) return 0;
16  const touch1 = touches[0];
17  const touch2 = touches[1];
18  if (!touch1 || !touch2) return 0;
19  return Math.hypot(
20    touch2.clientX - touch1.clientX,
21    touch2.clientY - touch1.clientY,
22  );
23}
24 
25/**
26 * Hook to handle pinch-to-zoom gestures on touch devices.
27 *
28 * @example
29 * ```tsx
30 * const elementRef = useRef<HTMLDivElement>(null);
31 * const [zoom, setZoom] = useState(1);
32 *
33 * usePinchZoom({
34 *   elementRef,
35 *   onZoom: setZoom,
36 *   minZoom: 0.5,
37 *   maxZoom: 3,
38 * });
39 *
40 * return <div ref={elementRef} style={{ transform: `scale(${zoom})` }}>...</div>;
41 * ```
42 */
43export function usePinchZoom({
44  elementRef,
45  onZoom,
46  minZoom = 0.5,
47  maxZoom = 3,
48  initialZoom = 1,
49}: UsePinchZoomOptions) {
50  const currentZoom = useRef(initialZoom);
51  const pinchStartDistance = useRef<number | null>(null);
52  const pinchStartZoom = useRef(initialZoom);
53 
54  useEffect(() => {
55    const el = elementRef.current;
56    if (!el) return;
57 
58    const onTouchStart = (e: TouchEvent) => {
59      if (e.touches.length === 2) {
60        pinchStartDistance.current = getDistance(e.touches);
61        pinchStartZoom.current = currentZoom.current;
62      }
63    };
64 
65    const onTouchMove = (e: TouchEvent) => {
66      if (e.touches.length === 2 && pinchStartDistance.current !== null) {
67        e.preventDefault();
68 
69        const currentDistance = getDistance(e.touches);
70        if (currentDistance === 0) return;
71 
72        const scale = currentDistance / pinchStartDistance.current;
73        const newZoom = Math.min(
74          maxZoom,
75          Math.max(minZoom, pinchStartZoom.current * scale),
76        );
77 
78        currentZoom.current = newZoom;
79        onZoom(newZoom);
80      }
81    };
82 
83    const onTouchEnd = (e: TouchEvent) => {
84      if (e.touches.length < 2) {
85        pinchStartDistance.current = null;
86      }
87    };
88 
89    el.addEventListener('touchstart', onTouchStart, { passive: false });
90    el.addEventListener('touchmove', onTouchMove, { passive: false });
91    el.addEventListener('touchend', onTouchEnd);
92    el.addEventListener('touchcancel', onTouchEnd);
93 
94    return () => {
95// … truncated