Go ProSign in
Beautiful and Accessible Drag and Drop with react-beautiful-dnd
Alex ReardonAlex Reardon

Many Drag and Drop experiences are built for sorting lists of content vertically and horizontally. react-beautiful-dnd focuses on these use-cases to give you a high-level abstraction for dnd that is easy to get started using.

react-beautiful-dnd utilizes the render props pattern to build accessible drag and drop for lists that look and behave how you would expect. You'll even get keyboard accessible drag and drop out of the box with no extra work.

In this course, we will create a highly interactive task management application from scratch. You will be introduced to the building blocks of react-beautiful-dnd and you will learn how to use these building blocks to add powerful drag and drop experiences to your own projects. You'll learn how to build Droppable containers to sort Draggable items horizontally and vertically, move items between columns, and even move the columns themselves.