image

React drag-and-drop components

Beautiful drag-and-drop behavior in React for lists, file uploaders, and layouts

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


react-beautiful-dnd

image

github.com

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.

react-dnd

image

github.com

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

react-grid-layout

image

github.com

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

image

github.com

A simple React component for making elements draggable.

react-dropzone

image

github.com

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

react-sortable-tree

image

github.com

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