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.

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.