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
Watch video How to drag and resize in react using react-spring and use-gesture? online without registration, duration hours minute second in high quality. This video was added by user BiteSize Academy 21 February 2022, don't forget to share it with your friends and acquaintances, it has been viewed on our site 6,966 once and liked it 121 people.