Beautiful and Accessible Drag and Drop with react-beautiful-dnd
Alex Reardon
- react
^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.
Free Community Resource
A Community Resource means that it’s free to access for all. The instructor of this lesson requested it to be open to the public.
Free Community Resource
A Community Resource means that it’s free to access for all. The instructor of this lesson requested it to be open to the public.
Course Content
You might also like these resources:
jotai gives you a minimalistic API that you can use that separates your state management from your UI. Don't have to set up any boilerplate like actions, reducers, etc.
Accept payments & sell products powered by Stripe and the best of the JAMStack.
Have a jump start on auditing and fixing accessibility issues in your applications and gain a better understanding of your target users and how to approach your web app design.