Drag and Drop with resizing browser window (react-use-gesture)

user_17760397 0
Viewed 179

I used hook useDrag from 'react-use-gesture'.

 const drag = useDrag((params) => {},
        {
            bounds: {...bounds}
        }
    )

I use bounds in full clientWidth.

It works fine with constant bounds. But after resizing browser window (open devtools panel in my case) hook use previous offset value(I need to drag all width of resizing clientWidth).

How can I use useDrag with document.body.clientWidth?

react-hooks reactjs drag-and-drop javascript
1 Answers

I found solution. If we need dynamic bounds we can rewrite values in hook callback

 const bind = useGesture({
            onDrag: (params) => {
                      params._bounds[0] = [1, smth1];

                      if (params.offset[0] > smth2) {
                          params.lastOffset[0] = smth2
                          params.offset[0] = smth2
                      }
})
user_177603970
Related