github atlassian/react-beautiful-dnd v2.2.0

latest releases: v13.1.1, v13.1.0, v13.0.0...
6 years ago


Moving between lists 🎉 #2 #3 #4

move-between-lists mov-scaled-0 4

Horizontal Vertical (more complex than a board)
move-between-lists-horizontal mov-scaled-0 3 move-between-lists-vertical-stress mov-scaled-0 3
  • Adding support for moving between vertical and horizontal lists
  • Works with both mouse and keyboard (thats right - keyboard!!)
  • You can now utilise type and isDropDisabled to conditionally allow dropping on a Droppable.

This was a mammoth effort with 135 commits, 120 files changed and 176 new tests. But what is harder to see how much @jaredcrowe and I wrestled with creating a transition experience that is robust, flexible and natural. I will be writing a blog soon about some of the algorithms (a small collision engine) we came up to drive our beautiful and natural experience.

Thanks so much to @jaredcrowe for his significant contributions - both in code as well as discussions.


DraggableProvided placeholder

In order to support moving between lists a Droppable is now provided with a placeholder element (similar to that of a Draggable)

type DroppableProvided = {|
  innerRef: (?HTMLElement) => void,
+ placeholder: ?ReactElement,

The Droppable placeholder needs to be inside the element that you are providing. This is not like Draggable where the placeholder needs to be a sibling of the provided element.

<Droppable droppableId="droppable-1">
  {(provided, snapshot) => (
    <div ref={provided.innerRef}>
      Good to go

+    {provided.placeholder}

Is that all?

Yep! The original API was designed with this feature in mind so there is no other changes required. In order to allow Draggables to transition to different Droppables ensure that they share the same type prop (which can be the default type if no type prop is provided). That's, all! Enjoy!


  • Increased the React peer dependency range. #84 Thanks @pofigizm!
  • Tones of refactoring and engineering health efforts all over the code base #2


This release brings to a close the first milestone for this project: Tree fort. Be sure to check out the other milestones to see what is coming next.

Thanks everyone!

Don't miss a new react-beautiful-dnd release

NewReleases is sending notifications on new releases.