Stack Overflow
Stack Overflow

Questions tagged [react-use-gesture]

The react-use-gesture npm package contains React hooks for dealing with touch gestures.

15 questions
2
votes
1 answer

Dragging elements to new positions independently using useSprings hook (+useDrag)

I was expecting each element to be updating independently, according to its latest positioning. However, moving an element after having moved another causes this unwanted behavior. export function Ingredients({ ingredients }: IngredientsProps) { …
mjfneto
  • 93
  • 1
  • 8
2
votes
1 answer

How can I drag an object in x and z constrained in y in react-three/fiber with an orthographic camera which may be moved via orbitcontrols?

I would like to be able to drag an object across a plane (think of a piece on a chess board) in a canvas using React-three-fiber and an orthographic camera. Here is an example (not mine) of that working with a fixed camera position:…
Korimako
  • 359
  • 3
  • 13
1
vote
0 answers

Three.js & @react-three/fiber - TextGeometry() cannot read properties of undefined (reading 'yMax')

I'm getting the error "Uncaught TypeError: Cannot read property 'yMax' of undefined" when adding text to a three.js scene using React-three/fiber. I've successfully rendered other geometries using the same function (apart from textgeometry and…
paq
  • 87
  • 8
1
vote
0 answers

How to debug @use-gesture bumping into something?

I'm using @use-gesture/react to drag a div around. The dragging is working just fine, but it keeps "bumping into" something. It appears that the motion is constrained by some containing div, but I can't for the life of me figure out why. There are a…
philolegein
  • 1,099
  • 10
  • 28
1
vote
2 answers

How to stop at the nearest row using react-spring + decay?

I implement calendar which can be veristically dragged by a mouse. I would like to have some inertia on mouse release. I was able to achieve this functionality by using use-gesture + react-spring libs. This is how it looks The problem I would like…
Roman Mahotskyi
  • 4,576
  • 5
  • 35
  • 68
1
vote
1 answer

Slow performance react-use-gesture and react-spring

Drag examples in the docs such as this one are extremely fast and map very accurately to my finger position. I've tried copying the examples one-to-one but there is a clear lag to catch up with my finger position. Here is a code sandbox example…
david_adler
  • 9,690
  • 6
  • 57
  • 97
1
vote
1 answer

Drag behaviour dropped on useGesture

I'm using react-use-gesture to drag a div along the x-axis. It doesn't do anything fancy, just store the movement x value and use that to offset the left css property of the div. The code uses the useState hook to store the cumulative x-offset and…
JonRed
  • 2,853
  • 5
  • 28
  • 37
0
votes
0 answers

How to use right mouse click events in use-gesture/react

When I use bind function from the react-use-gesture on a mesh, then the mouse down events on the mesh are overridden by the bind event. And usegesture is only taking only left click events. I tried adding mousedown events on mesh but it didn't work
jsc
  • 1
  • 1
0
votes
1 answer

How do i responsively reposition a draggable React Component depending on changes of the viewport?

I am having some troubles regarding the use of a Component that can be dragged and automatically snaps to nine calculated points in the viewport (Corners: Upper Left, U. Right, Bottom Left, B. Right, as well as all Axis halway through and the center…
jamesrogers
  • 67
  • 10
0
votes
0 answers

How can I get models to detach during useDrag hook?

I'm building a 3D configurator for sofa modules and had a question about my snapping function. In the scene, I drag models around to place them using use-gesture's useDrag hook, and when they approach they snap onto eachother. However: They seem to…
Rix11
  • 23
  • 4
0
votes
2 answers

putting bracket next to const

I'm new to react, and I have few question about some react expressions. I was watching the video to learn how to drag and drop components. The code below works, but I got confused by these things. Why const variable bindLogoPos became a function…
Juyeon
  • 35
  • 5
0
votes
1 answer

UseGesture Dragging moves to middle of screen in R3F

I'm using useGuesture and to make some elements draggable in R3F. When I start dragging (or even click the element) it moves to the center of the screen before it is then possible to drag it around. How can I get it to drag from it's current…
beek
  • 3,522
  • 8
  • 33
  • 86
0
votes
2 answers

I'm facing this error with react-use-gesture

sometimes this error gets thrown and it blocks the gestures : 315[Intervention] Ignored attempt to cancel a touchmove event with cancelable=false, for example because scrolling is in progress and cannot be interrupted.
سعيد
  • 1,547
  • 1
  • 14
  • 32
0
votes
1 answer

How to use react-use-gesture and useSpring in TypeScript?

I am trying to achieve a similar implementation of react-use-gesture and react-spring in TypeScript. The example in JavaScript that I am trying to convert is https://codesandbox.io/s/cards-fduch I am getting this blank card but when I look at the…
NavinRaj Pandey
  • 1,674
  • 2
  • 26
  • 40
0
votes
1 answer

Multitouch Gestures with useGesture in React

I'd like to detect multi-finger taps and swipes. Eg. detect a two finger tap or a four finger swipe down as such. Using regular React and useGesture. I'd like to know if it's even possible, because there's no mention of this in the docs. And any…
J0hannes
  • 593
  • 5
  • 10