This is a
playground to test code. It runs a full
Node.js environment and already has all of
npm’s 400,000 packages pre-installed, including
react-beautiful-dnd-short-press with all
npm packages installed. Try it out:
This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.
We have created a free course on
egghead.io 🥚 to help you get started with
react-beautiful-dnd as quickly as possible.
<table>reordering - table pattern
ReactDOM.createPortal- portal pattern
<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)
react-beautiful-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.
react-beautiful-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
react-beautiful-dnd offers a powerful, natural and beautiful drag and drop experience. However, it does not provide the breadth of functionality offered by
react-beautiful-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 />- What can be dragged around
resetServerContext()- Utility for server side rendering (SSR)
<DragDropContext />responders -
<Draggable />s during a drag - ⚠️ Advanced
Alex Reardon @alexandereardon