Create Reorderable Horizontal Lists with react-beautiful-dnd direction prop
In this lesson we will show you how to create <Droppable />s that are oriented on the horizontal plane.
The <Droppable /> component provides us with a direction prop that we can use to set a list of data to be sortable in the vertical or horizontal plane.
Instructor: [00:00] Up to now, we've only looked up vertical reordering in our application. React-beautiful-dnd also supports reordering draggables on the horizontal plane.
[00:11] First, we are going to go to our initial data. For this lesson, we're just going to use one column. I can now assume, and again, where we here. Now, I going to go to column. I'm going to convert task list into a flex parent.
[00:32] We can now see the items are being positioned left to right. We can remove the width of our container components, because we do not need that anymore, and also get rid of this flex growing, I mean, the height property.
[00:45] In our task component, rather rendering up the entire content of the task, I'm just going to make it now print out the first character. I'm going to give our container a width of 40 pixels, a height of 40 pixels, and change the border radius to 50 percent, so that these are now rounded.
[01:05] Rather than having white space at the bottom of our tasks, I now want on the right hand side of my tasks. I'm going to horizontally and vertically center the text by using flexbox. Our task list is set up, so that is ordered on the horizontal plane.
[01:21] When I start dragging, we're getting some weirdness. It's not always expected. We need to go back to our column component and change the prop on the droppable. A droppable has an optional prop called direction.
[01:35] By default, a droppable assumes better is ordered vertically. By changing the direction prop to horizontal, you are able to have list that is ordered in the horizontal plane. If we go back to our example now, we can say, that now we are able to have horizontal reordering using react-beautiful-dnd.
[02:00] This will also work with keyword. When we focus on a draggable, we currently get the default focus outline. This looks a bit funny, because our tasks are actually secular.
[02:14] What I'll do is create a focus style where we disable the outline and change the border color to red. I'm also going to bump up the border style a little bit. When we come back to our application and we focus on a task now, we won't get that blue focus box that we have before.