Skip to content

Latest commit

 

History

History
36 lines (30 loc) · 836 Bytes

usePinchZoom.md

File metadata and controls

36 lines (30 loc) · 836 Bytes

usePinchZoon

React sensor hook that tracks the changes in pointer touch events and detects value of pinch difference and tell if user is zooming in or out.

Usage

import { usePinchZoon } from "react-use";

const Demo = () => {
  const [scale, setState] = useState(1);
  const scaleRef = useRef();
  const { zoomingState, pinchState } = usePinchZoom(scaleRef);

  useEffect(() => {
    if (zoomingState === "ZOOM_IN") {
      // perform zoom in scaling
      setState(scale + 0.1)
    } else if (zoomingState === "ZOOM_OUT") {
      // perform zoom out in scaling
      setState(scale - 0.1)
    }
  }, [zoomingState]);

  return (
    <div ref={scaleRef}>
      <img
        src="https://www.olympus-imaging.co.in/content/000107506.jpg"
        style={{
          zoom: scale,
        }}
      />
    </div>
  );
};