Customise the Appearance of an App using react-beautiful-dnd onDragStart and onDragEnd
This lesson will show you how you can use the <DragDropContext> onDragStart and onDragEnd callbacks to add style updates to your application.
Using these callbacks will give you fine grain control of the look and feel of your application while dragging content throughout. In this lesson, we will update the text color of our list items as well as set the background color while dragging said item.
Instructor: [00:00] We also have some other information that we could use to update the style of our application in response to a drag. Previously, I mentioned that there are three callbacks for a DragDropContext. We are currently only using the onDragEnd callback.
[00:20] We can also use the onDragStart and onDragUpdate callbacks, if we wanted to add some more visual styling to our application. Here is some example data that is passed to the various callbacks for DragDropContext.
[00:37] I've actually seen this before in a previous lesson, when we were looking at preserving a reorder for our list, we were playing with the result object.
[00:47] These other objects are very similar. We have the start object which has the draggable ID, the type which we haven't gone into yet, and the source location, which is where the draggable started.
[00:59] Update is the same thing with an optional destination. This might be now if it's not over anything, or otherwise this will be the current location of the draggable in the system.
[01:18] Here I'm setting the text color of the body to be orange when a drag starts. This is a very simple way of changing the styles, or modifying the body.style property directly and setting it inline style.
[01:32] When I look at the example, when I start dragging, the color of the text on the page changes to orange. The drag is finished, but the text color has stayed orange. I'll reset that value in my onDragEnd function, so now when the drag ends, the text color changes back to its initial color.
[01:52] We can also make style changes in response to changes during a drag. What I'm doing here is creating a variable called opacity. It stores the percentage of the current index based on all of the tasks in our system. I'm then using that opacity variable to set the output channel on a background color.
[02:19] As I moved down the list, you will notice that the background color of our application is changing. That looks a bit harsh, so I'm going to add a transition on the background color. Adding that transition will make the changes between the colors more fluid. I'm also going to reset the background color to its initial value, when a drag ends.
[02:47] You can see the background color is bleeding through our header. That's because we haven't set a background color for our header yet, so it's just taking the background color of the body.
[03:01] This is a fairly contrived example that uses the DragDropContext callback functions to update some global styles. I generally don't update the styles for my application in these callbacks, and just rely on the snapshot values.