How to drag and resize in react using react-spring and use-gesture?
In this video we'll see how to build a video editing crop tool using reactjs and react-spring + use-gesture.
⚡️ Source code and blog post: https://www.undefinedapps.com/post/dr...
First we build the UI using Mui, a React UI Library. Then, we add a react component which overlays on top of our video player element and lets the user make a selection by dragging and resizing a selection area.
When the user confirms the selection, we make an API request to crop the video and return the result to the user.
0:00 Demo of What We're Building
1:14 Building the UI
5:14 Video Element + Controls
7:14 Crop React Component
12:15 Add Drag & Drop
20:20 Add Resizing
23:40 onCrop Callback
25:41 Crop API Request
30:38 Viewing The Result
⭐️ Subscribe for more content: https://newsletter.undefinedapps.com/
Video by EKATERINA BOLOVTSOVA from https://www.pexels.com/@ekaterina-bol...
#react #react-spring #use-gesture