react-zoom-pan-pinch icon indicating copy to clipboard operation
react-zoom-pan-pinch copied to clipboard

activation keys not working

Open netanelvaknin opened this issue 3 years ago • 3 comments

Hi :) I was trying to use activationKeys prop with different keys to allow the wheel only with them. for example: allow wheeling only when alt is pressed.

 <TransformWrapper
            initialScale={1}
            maxScale={2}
            wheel={{step: 0.4, activationKeys: ["18", "alt"]}}
            doubleClick={{disabled: true}}
            onWheel={({state: {scale}}) => setCurrentZoom(scale)}
          >

The actual result is that it's disabled the wheel option completely.

netanelvaknin avatar Jan 26 '22 13:01 netanelvaknin

+1

jpggvilaca avatar Feb 03 '22 09:02 jpggvilaca

For what it's worth this works for me


 <TransformWrapper
   wheel={{ step: 0.4, activationKeys: ["z"] }}
/>

wildseansy avatar Apr 05 '22 00:04 wildseansy

It uses KeyboardEvent.key to check wich key is being pressed. So you need to set "Alt" with first uppercase.

https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key

xStarman avatar May 14 '22 04:05 xStarman