🔮 v8.0.0 beta available

[dbismut]

Hi all,

React Use Gesture v8.0.0 is now available on npm with the next tag. You can install it by typing the following command:

# using yarn
yarn add react-use-gesture@next 

# using npm
npm install react-use-gesture@next

⚡️Please test this version on your app and report any breaking behavior! ⚡️

Internal changes

v8.0.0 is a major rework and refactoring of the code aiming at better structure and performance improvements across renders, thanks to @thephoenixofthevoid.

Breaking changes

Pointers (could be controversial)

The library now resorts to pointer events extensively: this simplifies some of the drag logic significantly, but has two main implications:

1. The { eventOptions: { pointer: true } } option is now gone. This means that react-use-gesture works out of the box with react-three-fiber 💁‍♂️

2. Because scrolling cancels pointer events on touch screens, you will need to style your element with touch-action: <value> to make sure the dragging can work properly. The docs for touch-action.

domTarget option no longer requires useEffect in user land.

When adding events directly to the dom element using domTarget you no longer need to clean the effect yourself.

// before
const bind = useDrag(() => { /* your logic */ }, { domTarget: window })
React.useEffect(bind, [bind])

// after
useDrag(() => { /* your logic */ }, { domTarget: window })

Non intentional movements will always fire your handler

This aims at working with the threshold / filterTaps option.

In React Use Gesture v7, if you had set the drag threshold option to 10, your useDrag handler would only fire when the x or y displacement of the user gesture would be greater than 10. This is no longer the case in v8. Your handler will fire as soon as the drag is initiated.

useDrag(({ down, active, movement: [mx] }) => console.log({ down, active, mx }), { threshold: 10 })

// BEFORE
// mouse down        --> <no output>
// mouse moves 8px   --> <no output>
// mouse moves 10px  --> { down: true, active: true,  mx: 10 }

// AFTER
// mouse down        --> { down: true, active: false, mx: 0 }
// mouse moves 8px   --> { down: true, active: false, mx: 0 }
// mouse moves 10px  --> { down: true, active: true,  mx: 10 }

This means that if you have some complex logic in your handler, you may want to wrap it into like so:

useDrag(({ active }) => {
  if(active) {
    /* your complex logic */
  }
}, { threshold: 10 })

This changes makes it easy to access initial pointerdown and subsequent pointermove events in userland, and possibly stopPropagation or preventDefault.

Added features

v8.0.0 doesn't add many features but:

1. Drag and pinch now works on multiple dom elements at once #170.
2. Drag option { filterTaps: true } will also prevent unwanted taps on children elements #173.

Remaining to be done

• Make handlers extensible for react-three-fiber Type error with react-three-fiber #182
• Fix some types
• Testing
• Tree shaking
• Better API for active when used with filterTaps, threshold, etc.
• Test with React 17

Happy testing 🕹

[thephoenixofthevoid]

Try to comment out the line 60:

// if (pinching || canceled) return;

On my Android it works perfectly then. Please, let us know if it helps.

[thephoenixofthevoid]

Please, record the same interactions with the following app: https://patrickhlauke.github.io/touch/tracker/multi-touch-tracker-pointer-hud.html
So that the debug information is clearly visible (you will get it when open the link).

[dbismut]

@n1ru4l I'm on my phone atm but have a look at https://codesandbox.io/embed/old-shadow-uq7mt?codemirror=1. The inner orange square drag doesn't propagate to its parent.

[dbismut]

Hi @n1ru4l is it possible to provide a repro sandbox? I'll try to have a look over the week-end.

[dbismut]

@n1ru4l indeed you're right! I'll check about removing undefined, but 8.0.0-alpha.5 should have the correct event typing in the handlers, please let me know if this works?

[dbismut]

Now 8.0.0-alpha.6 has event defined in handlers.

[n1ru4l]

@dbismut Could it be possible that there is no longer a state.point passed into the onPointerDown useGesture argument? It was never documented or typed AFAIK. But I used it for convenience so I don't have to calculate the pointer coordinates on the plane via the clientX/Y of the event. Is this intended? (See https://github.com/dungeon-revealer/dungeon-revealer/blob/24b13ef992f8247606dfbf743ae5f8505b4db6bc/src/map-view.tsx#L576). I pass the event handlers to a react-three-fiber mesh element.

EDIT: I noticed that the point property is on the event parameter. Is there a way to type the event stricter? Right now it is simply Event. I think the PointerEvent react-three-fiber/canvas.d.ts is the correct type. (See https://github.com/dungeon-revealer/dungeon-revealer/pull/745/files#diff-a83c2e3bdae6f0939ac8bf099cca9466R573)

Also is it possible that origin in onPinch is undefined (is could be according to the typings)? (See https://github.com/dungeon-revealer/dungeon-revealer/pull/745/files#diff-a83c2e3bdae6f0939ac8bf099cca9466R721)

event is now defined everywhere and the typings are more correct! Awesome 🎉

[dbismut]

@n1ru4l yes origin can be undefined when people are zooming with a trackpad, there's no origin in that case.

Regarding the event parameter, you're using it in a native handler, so at this time it's just an Event. That could be improved to match the event type of the handler, but that wouldn't solve the fact that there's no way the lib could guess you're using r3f and cast it to a ReactThreeFiber.PointerEvent all by itself!

[dbismut]

@n1ru4l I should have been clearer sorry. You're probably zooming with Safari. But pinching also supports zooming with more standard trackpads, using the wheel while pressing the ctrl key. In that case, no origin 🤷‍♂️ you can try with Chrome.

Regarding the typing issue with r3f, the user should be responsible for which event it expects from the handler, I think casting should be a better solution. I'll try to work on sth when I have time.

[dbismut]

You're right, I should add this to the doc :) I'll see about mouse coordinates as default.

[dbismut]

Hey @n1ru4l type of origin is now defined in 8.0.0-alpha.7 (it actually was defaulted to mouse coordinates in the previous alpha, so I was wrong when I said it was undefined).

Regarding casting events to Three, have a look at this: #182 (comment)

Hope that helps ;)

[n1ru4l]

It seems like a new alpha is released but the code is not pushed on github yet 😅 (v8.0.0-alpha.9)

[dbismut]

v8 is now released