🎁

12 Days of Baddass Courses sale! Get instant access to the entire egghead library of courses and lessons for 58% off.

Runs out in:
05 : 11 : 17 : 34

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

ClockIcon63m
reactReact
^16.0.0
Star icon$$$
Star icon$$$
Star icon$$$
Star icon$$$
Star icon$$$
4.7
526 people completed
Alex Reardon
By

Alex Reardon

A JavaScript enthusiast and perpetual tinkerer (that is a word right?). I am a principal front-end engineer at Atlassian and the author of react-beautiful-dnd. I ...

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.

Alex Reardon
By

Alex Reardon

A JavaScript enthusiast and perpetual tinkerer (that is a word right?). I am a principal front-end engineer at Atlassian and the author of react-beautiful-dnd. I ...

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