Customise the Appearance of an App during a Drag using react-beautiful-dnd snapshot Values

Instructor: [00:00] The reordering of our task list is looking really nice. What if we wanted to add some more visual styling to our application in response to a drag? React-beautiful-dnd provides with a lot of information about the state of a drag interaction, which can be helpful in adding some visual cues to your application.

[00:19] You're welcome to update anything you like, really, as honestly don't change the dimensions of your draggable and droppable components during a drag. Changing the background colors of components is generally a nice way to indicate what is moving and what is currently being dragged over.

[00:37] How do we do that? Go to task, the second argument to this function is called snapshot. This object here contains a number of properties that you can use to style your draggable component during a drag.

[00:57] Here we have an example draggable snapshot object. Inside of the snapshot, we have two properties. The first one is a Boolean flag called isDragging. isDragging will be set to true when the draggable is currently being dragged. The other property draggingOver will be set to the ID of the droppable that the draggable is currently dragging over. If a draggable is being dragged and is currently not over a droppable, then draggingOver will be set to null.

[01:32] We're now going to use the snapshot to change the background color of our task as it drags. What I'm doing here is passing a prop called isDragging to my style component which has the value of a snapshot.isDragging property.

[01:54] Using the style components API, I can conditionally set the background color of the component based on this prop. What I'm doing here is stating that if the isDragging prop on my style component is true, then I want to set the background to be light green. Otherwise, I want to set the background color to be white.

[02:15] Now when we drag our task, the background color of the dragging item has changed to light green. We can also do the same effect for our cone. The second argument to a droppable function is also a snapshot.

[02:33] Here we have an example droppable snapshot. A droppable snapshot has two properties. Firstly, it has a Boolean flag named isDraggingOver. This will be set to true when a draggable is dragging over the droppable. There is another property called draggingOverWith, and this will be set to the ID of the draggable that is dragging over a droppable. DraggingOverWith will be set to null if the droppable is not been dragged over.

[03:09] What we are going to do is change the background color of our task list when it is being dragged over. I'm adding a prop to our task list style component called isDraggingOver. I'm setting the value of this prop to match the snapshot.isDraggingOver Boolean.

[03:37] If the isDraggingOver prop is set to true on our task list, I'm going to set the background color of the task list to sky blue. Otherwise, I'll set it to white. When I pick up a task, the background color of the task list turns to light blue. When I move the task outside of the list, the background color reverts to white.

[04:06] I like adding a transition on the background color property for my droppables, as it makes the color changes more visually appealing as you move between droppables.