DEV Community 👩‍💻👨‍💻

Cover image for 5 NPM Packages you can use for Drag & Drop in your React app 🙌
Gulshan Aggarwal
Gulshan Aggarwal

Posted on

5 NPM Packages you can use for Drag & Drop in your React app 🙌

Drag & Drop is something that can enhance your user's experience if you are building graphic designing tools like Canva. A few days back, I developed a blog post cover designing tool titled Cover-Builder that allows you to create nice cover images for your blog posts. The tool heavily relies on Drag & Drop feature. This was the first time, I was looking to add Drag & Drop into any of my apps & luckily found some cool packages.

Hope-you-guys-are-excited

1. React-Dnd - When it comes to dragging into different parts of your application then this is the most used package by developers.
Note: You will also need to install a second package react-dnd-html5-backend so that react-dnd can use HTML 5 drag-drop API under the hood.

2. React-Beautiful-Dnd - Most famous package to create beautiful drag and drop lists that anyone can use - even people who cannot see. It provides you features like multi-dragging, auto-scrolling, and support for mouse, keyboard, and touch devices.

3. React-Draggable - Unlike the react-dnd package, you need to install only a single package here. It provides you a draggable component that you can wrap around the element you are looking to drag & that's all. Here you can also pass props like defaultposition, axis & some others for customization.

4. React-Rnd - If you are looking to resize your items with Drag &Drop then this is for you. Like React-Draggable it also allows you to pass some props for better customization.
Note: It also has a bound prop which allows you to bound Drag & Drops in a particular region.

5. React-Dropzone - Creating Drag & Drop feature for uploading files is not so easy task, many JS events are involved in it. This package makes file Drag & Drop handling easy for you.

🏁 The aim of the article is to give you a brief look of available Drag & Drop packages which can make Drag & Drop easy for you. If you have used another package let me in know in the comments.

Thank you for reading.

ok-bye

Latest comments (4)

Collapse
 
pavellaptev profile image
Pavel Laptev

There is also GSAP library

Collapse
 
gulshanaggarwal profile image
Gulshan Aggarwal Author

Oh! nice, it looks a little smooth

Collapse
 
miketalbot profile image
Mike Talbot

Personally I use this one: https://dndkit.com/

Collapse
 
gulshanaggarwal profile image
Gulshan Aggarwal Author

Cool, thanks for sharing!

In defense of the modern web

I expect I'll annoy everyone with this post: the anti-JavaScript crusaders, justly aghast at how much of the stuff we slather onto modern websites; the people arguing the web is a broken platform for interactive applications anyway and we should start over;

React users; the old guard with their artisanal JS and hand authored HTML; and Tom MacWright, someone I've admired from afar since I first became aware of his work on Mapbox many years ago. But I guess that's the price of having opinions.