Beautiful and Accessible Drag and Drop with react-beautiful-dnd

ClockIcon63m
reactReact
^16.0.0

Drag and drop (dnd) experiences are often built to sort lists of content vertically and horizontally.

react-beautiful-dnd is an excellent tool for these use cases. It utilizes the render props pattern to build accessible dnd functionality into lists that look and behave as you would expect—and you’ll even get keyboard-accessible dnd, straight out of the box, with no extra work required. It’s actually easy to start using, and this course is a great place to start.

We will create a highly interactive task management application from scratch using the building blocks of react-beautiful-dnd. Over 14 lessons, you will get practice in:

  • building droppable containers to sort draggable items horizontally and vertically
  • moving items between columns
  • and even moving the columns themselves

Following the course, you’ll be ready to build powerful dnd experiences into your own projects.

Illustration for Course Introduction: Beautiful and Accessible Drag and Drop with react-beautiful-dnd

Course Introduction: Beautiful and Accessible Drag and Drop with react-beautiful-dnd

Alex Reardon
Lesson
ClockIcon
0:58