How to enable mouse wheel zooming

[damiano216]

Hello,

How can I enable mouse wheel zooming without having to hold on the ctrl keyboard button?

Currently I am using the package like this:

import QuickPinchZoom, { make3dTransformValue } from "react-quick-pinch-zoom";
import React, {useRef} from "react";

export default function MyComponent({

const imgRef2 = useRef();

const onUpdate = useCallback(({ x, y, scale }) => {
   const { current: img } = imgRef;
   const value = make3dTransformValue({ x, y, scale });

   img.style.setProperty("transform", value);
  }, []);

return (
 <QuickPinchZoom onUpdate={onUpdate}>
        <img ref={imgRef2} ...../>
  </QuickPinchZoom>
)

)}

[retyui]

use a shouldInterceptWheel pror

const shouldInterceptWheel = event => !(event.ctrlKey || event.metaKey); // default

// but you need always sent true
const shouldInterceptWheel = event => true; // use it

[damiano216]

Hello,

Using

<QuickPinchZoom
          onUpdate={onUpdate}
          shouldInterceptWheel={(e) => {
            e.ctrlKey || e.metaKey;
          }}
        >

I made zooming work for both the mouse and the laptop touchpad.

Thanks

[retyui]

just for better understanding, your function return nothing

const shouldInterceptWheel = (e) => {
            e.ctrlKey || e.metaKey;
          }

shouldInterceptWheel() // undefined 

[damiano216]

Yes, the function returns nothing.

But by using it this way, I achieved the desired result to have: -zooming using the laptop touchpad AND -zooming by using the mouse wheel - without having to press any key at the same time

I understand that it may not be a solution as per the official documentation, but it solved our necessities :)