Comments (14)
what is a rollover? you mean something like a hover?
from use-gesture.
Yes sorry a hover. We call that rollover in French I was certain it was a word.
from use-gesture.
i only know it as a trick for dogs : D (not a native english speaker). i guess it would be easy to add - though it would re-render the component when onAction isn't defined. wouldn't it be easier to just read out onMouseMove on the div you bind to a gesture? that way it's under your control. or propose an api, maybe it does makes sense adding it.
from use-gesture.
This is what I'm doing at the moment but, I don't have access to all velocity, etc. that you provide in your package :) I was curious that maybe #37 would help my case?
from use-gesture.
i think not because onmove is only called when you click and drag. maybe we could expose the calculation stuff, so that you can call it like so:
import { useGesture, calculate } from 'react-with-gesture'
...
return <div {...bind()} onMouseMove={event => {
const data = calculate(event)
Would that be useful to you? If you like, you can make a PR and we review it.
from use-gesture.
thinking about it, maybe including the possibility to receive move is perhaps the best, then you don't need to fiddle around with extra events and you can create one gesture in one place.
just needs to be a clear and easy api.
from use-gesture.
Yeah, that's what I was trying at the moment.
So just to clarify, this is what I had was:
const [{ xy }, set] = useSpring(() =>({ xy: [0,0] }))
const onMouseMove = useCallback(
e => !isTransitioning && set({ xy: [e.clientX, e.clientY] }),
[isTransitioning, set]
)
//...
<animated.div onMouseMove={ onMouseMove } style={{ transform: xy.interpolate(trans) }} />
So I've modified react-with-gesture
to have a move
prop in the config to be able to do:
const bind = useGesture(
{
onAction: ({ xy }) => !isTransitioning && set({ xy: xy }),
move: true, // <-- new config prop
}
)
That works ok, but unfortunately I'm not sure about two things:
- where to remove the event listener that is created in
handlers
- how to inject the
isTransitioning
dependency (but I think you've already answered this in another issue I submitted saying it's not possible)
PS: thanks for taking the time to answer, I know you're busy with react-three-fiber
, this should be huge in the creative front-end community ;)
from use-gesture.
I dig the move prop, let's do this!
where to remove the event listener that is created in handlers
useEffect(() => {
// register events ...
() => {
// unregister event ...
}
}, [props.move]
could you explain isTransitioning
once again? i am kinda out of the loop a little.
from use-gesture.
Thanks! Not I'm not clear where to use useEffect
though, I think it's forbidden to use it in handlers
? At least that's what [email protected]
tells me (handlers
is not a custom hook, and it can't be since it's used in the callback of useState
).
Sorry, isTransitioning
is essentially a custom prop that my component gets that reflects the fact the router is transitioning from one page to another. In that situation, I want the animations to not trigger.
from use-gesture.
Humpf sorry I'm stupid. Since I need hover and not drag, I don't need to have a window.listener to anything. I just need to write:
if (props.move) {
output[`onMouseMove${capture}`] = handleMove
}
... and then the listener will only apply to the element I'm binding, and will be removed automatically by React :)
Now there's the dependency issue though :) For the dependency, indeed, useRef
does the trick. I'll try to submit the PR for the package to handle simple hover gestures.
from use-gesture.
Hey @drcmda so here is a sandbox demo that shows how hover would behave: https://codesandbox.io/s/llrwmpozq
The only lines that I've added to the package are below (I've changed the move
prop to hoverOnly
as I thought it was clearer:
if (props.hoverOnly) {
output[`onMouseMove${capture}`] = handleMove;
output[`onMouseEnter${capture}`] = handleDown;
output[`onMouseLeave${capture}`] = handleUp;
}
One thing that is not handled there is boundaries but I don't think they're handled for drag either anyway?
from use-gesture.
looks good to me, i'll keep on working on this lib after some of the other stuff in react-three-fiber. hope i can finish it quickly.
from use-gesture.
I've just been looking at how we could also implement scroll events, and I think it would be a matter of a few extra lines, with 95% code reuse. I don't know if you consider it to be a gesture in the sense you intended this lib though :)
from use-gesture.
Here's a quick try: https://codesandbox.io/s/8x05x4xr3j
There is still some work to do since at the moment it only works on the window element but you get the idea (although I get horrible perf in Safari so I might be doing some wrong) here.
from use-gesture.
Related Issues (20)
- Using modifierKey causes the mac pinch event to return HOT 2
- Using pointer.touch cannot be dragged under windows system HOT 6
- useDrag breaks onClick listener in React portal to shadow dom HOT 2
- using video element inside useDrag component doesn't allow the video to play/pause using single click over the video HOT 6
- DragBounds ignored when rerender target HOT 1
- dynamically updating useDrags axis option resets movement : [mx,my] HOT 2
- 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
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.