Comments (9)
Released it today: https://twitter.com/0xca0a/status/1081185260208078849
from use-gesture.
I am having a similar issue with Chrome reloading the page when I swipe down. Having the ability to stopPropagation/preventDefault is a must 🤳
At first I tried using onAction
to achieve this goal, expecting it to send down the event, but that's not possible. So, my proposal is that we change the api to expose event
somehow.
// proposal A
// send `event` as extra argument in `onAction`
useGesture({ onAction: (props, event) => event.preventDefault() })
// proposal B
// provide exclusive handler for `event`
useGesture({ onEvent: event => event.preventDefault() })
from use-gesture.
I've made a rough draft here, it fulfils all options and does some extras (like calculating directions, velocity, local deltas, etc.)
https://codesandbox.io/embed/n10mvnxmmm
You can exchange the demos in the render function (Drag/Pull/Decay)
/** [bind, set] = useGesture(eventHandler: {
event base event
down mouse down / touch start
first initial event?
target dom node
time time tag
initial first click/touch position (vec2)
xy page position (vec2)
delta delta (xy - initial) (vec2)
previous previous delta (vec2)
direction direction normal (vec2)
local delta bookkeeping (stores drop-point) (vec2)
lastLocal internal, used by local
velocity drag speed/momentuum
args args passed to bind(...)
temp args (optionally) returned by eventHandler
})
or ...
bind = useGesture({ onAction, passive, mouse, touch })
[bind, props] = useGesture({ passive, mouse, touch })
<Gesture onAction passive mouse touch />
@withGesture({ onAction, passive, mouse, touch })
class extends React.Component {}
*/
If you have additional ideas or comments about the new api, please go ahead, i'm all ears.
@zvictor in the draft above it's similar to your PR. Though transient is out, onAction is enough to signal transient mode i guess. and passive is an option itself. can take these props as they are, and withGesture now wants options first and then the component. useGesture(eventHandler) is shortform for useGesture({ onAction, passive, etc })
from use-gesture.
Yeah, I noticed, there’s no way currently to pass props. I think it would be a breaking change at least for the HOC. Should we do it?
from use-gesture.
@mjsisley i think i got some console warnings in chrome, didn't they change the way events worked? I'm a bit out of the loop, do you know what would be the right way to do it? Would you go for an option, or use a reasonable default.
from use-gesture.
Makes sense, the event is now included in 3.0.3. I've switched it to passive mode, though, so in order to be able to do e.preventDefault it would be something like this:
useEvent({ transient: true, onAction: props => props.event.preventDefault(), passive: false })
from use-gesture.
@drcmda Is it possible to preventDefault in render props pattern? I don't quite understand transient mode, how are things different in transient mode will something like below work ?
Getting event.preventDefault is not a function
in mobile.
from use-gesture.
Seems yes from my side.I am facing the same issue that Victor mentioned i.e the browser refreshing the page on swiping down.Hopefully the breaking change you mentioned won't cause issues somewhere else or do they (I don't have the whole picture)?
from use-gesture.
thanks for the great and quick work, @drcmda!
I pushed a little as #18 and I would like to also make a comment about the passive
prop added by you.
I think the code you posted above contains some imprecisions. Wouldn't the correct way be as below?
useGesture({ transient: true, onAction: props => props.event.preventDefault(), passive: {passive: false} })
If my understanding of the code is correct we are sending the prop passive
, as it is, down as the third argument of addEventListener, which is called options
there. I would then recommend calling this prop something that relates to its original name, e.g. listenerOptions
or just options
.
useGesture({ transient: true, onAction: props => props.event.preventDefault(), options: {passive: false} })
from use-gesture.
Related Issues (20)
- Using alt+left for navigation prevents all gestures on elements with axis: 'y'
- Drag gesture: Delay setting behavior does not adhere to documentation HOT 4
- Drag + Click + filtertaps option breaks onclick listener. Drag + Click + Treshold works. HOT 1
- touch-action: pan-y prevents L shaped gestures to scroll
- onPinch breaking on control + scroll HOT 5
- Where do I import a3f from? HOT 1
- Getting the error "a3f is not defined"
- Textarea doesn't work inside gesture container HOT 4
- Documentation website is broken (in firefox) HOT 8
- Type error with @types/react >=18.2.66
- (Firefox) Click event fired on drag end
- 100ms delay between pointermove events in Android webviews? HOT 1
- [@use-gesture/vanilla] Touch event was abnormally interrupted. HOT 1
- The codesandbox example has TypeError
- Zoom pinch gestures and the from parameter
- Vanilla - Glitch during fast gestures
- Reset pinch offset, change pinch sensitivity and change unpinching behaviour
- Rotating/onWheel function only works on mobile
- state swipe is -1 for both axes even with axis restricted to y
- Swiping too hard causes the whole viewport unclickable HOT 6
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from use-gesture.