React drag-and-drop components

Oct 28, 2020/listsreactlibraries

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.

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).

Editor's Picks

image

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, etc.
image

react-dnd

React DnD is a set of React utilities to help you build complex drag and drop interfaces while keeping your components decoupled.
image

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.
image

react-draggable

A simple React component for making elements draggable.
image

react-dropzone

Simple React hook to create a HTML5-compliant drag'n'drop zone for files.
image

react-sortable-tree

Drag-and-drop sortable component for nested data and hierarchies