Beautiful and accessible drag and drop for lists with React.
Alex Reardon has created a free course on egghead.io
๐ฅ (using react-beautiful-dnd) to help you get started with @hello-pangea/dnd
as quickly as possible.
<table>
reordering - table pattern
<Draggable />
@atlaskit/tree
package<Droppable />
list can be a scroll container (without a scrollable parent) or be the child of a scroll container (that also does not have a scrollable parent)@hello-pangea/dnd
exists to create beautiful drag and drop for lists that anyone can use - even people who cannot see. For a good overview of the history and motivations of the project you can take a look at these external resources:
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. @hello-pangea/dnd
is a higher level abstraction specifically built for lists (vertical, horizontal, movement between lists, nested lists and so on). Within that subset of functionality @hello-pangea/dnd
offers a powerful, natural and beautiful drag and drop experience. However, it does not provide the breadth of functionality offered by react-dnd
. One shortcoming is that grid layouts are not supported (yet). So @hello-pangea/dnd
might not be for you depending on what your use case is.
The ways in which somebody can start and control a drag
<DragDropContext />
- Wraps the part of your application you want to have drag and drop enabled for
<Droppable />
- An area that can be dropped into. Contains <Draggable />
s
<Draggable />
- What can be dragged around
resetServerContext()
- Utility for server side rendering (SSR)
<DragDropContext />
responders - onDragStart
, onDragUpdate
, onDragEnd
and onBeforeDragStart
<Draggable />
s
innerRef
draggableId
and droppableId
s
doctype
TypeScript
: type information
<svg>
s
@hello-pangea/dnd
<Draggable />
s during a drag (11.x behaviour) - โ ๏ธ Advanced
<Draggable />
- Using our cloning API or your own portal
โ ๏ธ These following translations are based on react-beautiful-dnd.
Alex Reardon @alexandereardon
Alex is no longer personally maintaning this project. The other wonderful maintainers are carrying this project forward.
react-beautiful-dnd
. Atlassian is no longer involved with this project.
Thanks to Chromatic for providing the visual testing platform that helps us review UI changes and catch visual regressions.