react-beautiful-dnd is a React library for creating drag and drop lists, built by Atlassian. This library has many great characteristics:

• Simple and easy to use API
• Accessibility compliant (full keyboard support and screen reader support)
• Mobile and touch-device friendly

Another popular React drag and drop library is react-dnd. react-beautiful-dnd is much simpler than react-dnd, however has some limitations and is primarily designed for drag and drop with vertical and horizontal lists.

In this blog, we are going to focus on react-beautiful-dnd — how to set it up, some details about the API, and finally how to implement a re-orderable list.

#javascript