How to drag and drop a div in react using hooks? (react-use-gesture + react-spring)

Подписаться 4,6 тыс.

Просмотров 17 тыс.

50% 1

⚡️ Live demo and source code: www.undefinedapps.com/post/dr...
In this video we look at how to drag and drop in react using the react-use-gesture and react-spring libraries. We take the introduction screen of create-react-app and add dragging to its components. We then add an overlay which can be dragged up and down to expose a background image behind it. We use the hooks: useDrag (from react-use-gesture) and useSpring (from react-spring).
My previous video about react-spring: How to animate mount and unmount of a react component using react-spring • How to animate mount a...
⭐️ Subscribe for more content: newsletter.undefinedapps.com/
Background image by Adam Vradenburg @vradenburg unsplash.com/photos/_gu7E90QChU
#react #animate #javascript

Хобби

Опубликовано:

20 июл 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 23

@dimitardimitrov3421 2 года назад

This is one of the best videos on react-use-gesture and react-spring! Great job!

@Hereisvito Год назад

this is one of the best tutorials, I've ever seen it's highly recommended.

@khandoor7228 3 года назад

This is awesome Great job!

@codigosimple1989 2 года назад

this is brilliant!!

@franku.n.1798 2 года назад

Great Job. well explained!

@yaroslavljulka5440 2 года назад

Man, thanks for your job it`s costs a lot! `cause i spent a lot of time to find the solution, and you explain in 3 min and it`s work perfectly! Thumbs up - Subscribed - keep going to do

@edwinvarghese 2 года назад

great video. explained it so well. thank you so much.

@ponnyhamrosh2451 3 года назад

Very Nice video and nicely explained 👌

@omidkazemi6049 2 года назад

Great job 🔥

@NonBinary_Star 2 года назад

Great tutorial!

@bajarangjadhav8432 Год назад

very great video. thanks

@medAmineRg 9 месяцев назад

great video

@MrEliyahilel 2 года назад

Thanks a lot

@GauravSingh-hn8cg 2 года назад

New subscriber here.

@scienceblossom6197 Год назад

Beautiful tutorial, however, a problem with this approach is, it assumes that user will always use their browser in full-height. If they make their browser window smaller, then the snapping of the app overlay will not snap based on the new height, and will disappear until the user re-stretch their window to full height. I guess getComputedStyle or something like that would could be an alternative. Thank you anyways, very clearly explained react spring and useDrag from react-gestures.

@user-fz7uc7nh1z Год назад

Thank you for this video! It's such a nice tutorial. I'm just confused about one thing. I made my code same way as the video, but it keeps showing scrolls when the handle is slapped down. My overlay div moves downside with its height(100%), so I can scroll down to see whole overlay div. How can I hide overlay div which is pulled outside the screen?

@user-nr1en6sb2k Год назад

Aehooo one more project for me

@jesusjuvinao8210 2 года назад

Hay una forma de hacer solamente con codigo nativo de react, o sa sin librerias?

@andersonalmeydat7715 2 года назад

When I open DevTool and apply "Mobile Device", I can't slide the div, it gets stuck, help me!!! :(

@salman8562 2 года назад

what would we have to change to convert this into a class component instead of a sfc?

@salman8562 2 года назад

Newbie here, stuck cause I don't know how to do what u did inside a react class, i want position to be state and bindposition a function, but it gives me error