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

Top comments (4)

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!

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

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.