This content originally appeared on DEV Community and was authored by Gulshan Aggarwal
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.
This content originally appeared on DEV Community and was authored by Gulshan Aggarwal
Gulshan Aggarwal | Sciencx (2022-07-19T12:52:51+00:00) 5 NPM Packages you can use for Drag & Drop in your React app 🙌. Retrieved from https://www.scien.cx/2022/07/19/5-npm-packages-you-can-use-for-drag-drop-in-your-react-app-%f0%9f%99%8c/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.