React Drag-and-Drop Components

Sep 05, 2021#react#libs#lists

Drag and drop UI has become an integral part of most modern applications. It provides richness in UI without comprising the UX. There are many use cases for drag and drop UI. The most common ones are:

  • Using drag and drop in the browser to upload files
  • Moving items between multiple lists
  • Rearranging images or assets

HTML5 Drag and Drop has an awkward API full of pitfalls and browser inconsistencies. There are a lot of libraries out there that allow for drag and drop interactions within React.

  • React-dnd - React DnD is a set of React utilities to help you build complex drag and drop interfaces while keeping your components decoupled. It is a perfect fit for apps like Trello and Storify, where dragging transfers data between different parts of the application, and the components change their appearance and the application state in response to the drag and drop events.
  • React-beautiful-dnd - Beautiful and accessible drag and drop for lists with React, powerful keyboard and screen reader support, plays extremely well with standard browser interactions, unopinionated styling, and plays well with nested interactive elements by default.
  • React-grid-layout - A draggable and resizable grid layout with responsive breakpoints, for React. Compatible with server-rendered apps, Layout can be serialized and restored, no jQuery, etc.
  • React-draggable - A simple React component for making elements draggable.
  • React-dropzone - Simple React hook to create a HTML5-compliant drag’n’drop zone for files.
  • React-sortable-tree - Drag-and-drop sortable component for nested data and hierarchies.

Most notable of these is the amazing react-dnd. It does an incredible job at providing a great set of drag and drop primitives which work especially well with the wildly inconsistent html5 drag and drop feature.

React-beautiful-dnd is a higher level abstraction specifically built for lists (vertical, horizontal, movement between lists, nested lists and so on).