Comments (12)
Hey @sampl,
you can use the provided callbacks for that. I modified the example:
https://codesandbox.io/embed/w0x1030lwk
Don't forget to return the props in every callback. They are used in the event hooks of react-with-gesture
.
Cheers.
from use-gesture.
@monstersintokyo just what I needed--thank you so much!
from use-gesture.
@sampl you're welcome :-)
from use-gesture.
@drcmda how would this example work now that we only have the onAction
callback?
Including onAction
means we can update component state based on events but the children of <Gesture />
don't re-render.
Doing it like this isn't gonna work well
updateState = () => this.setState({ ... });
<Gesture>
{({ ... }) => {
// Calling this.setState() from render() is bad...
if (some gesture condition is met) this.updateState();
return (
<Spring>
{...}
</Spring>
);
}
}
</Gesture>
from use-gesture.
@tim-soft did something change? how did you do it before? i think otherwise in the class base api that needs to be componentDidUpdate that does the updateState().
from use-gesture.
In an older version, we could call setState() based on some gesture event like in https://codesandbox.io/embed/w0x1030lwk without interfering in the animation
updateState = (props) => {
if (some gesture condition is met) this.setState({ ... });
return props;
}
<Gesture onMove={this.updateState}>
{({ ... }) => (
<Spring>
{...}
</Spring>
);
}
</Gesture>
Using the onAction
prop causes the spring to not animate
from use-gesture.
the last bit i don't understand yet. if you're in onAction and you cause a setState, why wouldn't the spring animate? It's been a while but i think i've had trouble figuring out what to do with the renderprops api as it didn't lend itself to this sort of stuff, but using local state as a model for the animation should always work.
from use-gesture.
Here's a codepen where I try to replicate https://codesandbox.io/embed/3vv25z07j6
The top slider uses onAction to decide when to call setState()
The bottom slider tries to call setState() inside the render function --> obviously a noop
You'll notice the top slider set the state, but doesn't move when you drag it around
from use-gesture.
I see. Could i interest you in adding these events back via PR?
now: https://github.com/react-spring/react-with-gesture/blob/master/index.js
from use-gesture.
definitely 👍
from use-gesture.
codesandbox
demo code not working. showing this error
ModuleNotFoundError Could not find module in path: '@babel/runtime/helpers/builtin/es6/objectSpread' relative to '/node_modules/react-spring/dist/react-spring.es.js'
How to solve ?
from use-gesture.
@arpitprod This is an old issue. Swipe is documented in the documentation.
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.