Drag and Animate List Reorders with Reorder Components

Instructor: [0:01] Now we have a list of items that animates in every time that we add a new one and animates when we remove one. What if our users wants to take one of these items and change the order and then have the other ones animate as the order changes.

[0:17] We can do that pretty easily with Framer Motion. The first thing we need to do is import reorder from Framer Motion. This gives us access to the reorder group component and the reorder item component.

[0:34] To be able to animate any list of items, they need to be wrapped in the reorder group component. Already here on our list, we have this motion.ul motion component that we made earlier in the course.

[0:48] What we'll do is that we'll change this motion.ul component to a reorder group component. I'll replace motion.ul with reorder with reorder.group. Of course, make sure we do the same thing with the closing tag.

[1:08] Replace motion.ul with reorder.group. By default, the reorder.group component is a UL tag under the hood, but you can make it a OL tag if you needed to change it. The reorder.group component needs a axis prop. We'll set the axis to Y.

[1:40] Now the reordering of our list is bound to the y-axis. Another required prop for the reorder.group component is values. Inside of values, you want to pass an array, which represents the items that you want to reorder. In this case, we'll take our item state variable.

[2:01] The final required prop for the reorder.group component is on-reorder. On-reorder, we're taking a function that will update the state of the array that you pass into the values prop. To get this function, let's head over to shopping list.js.

[2:25] Let's use the setItems state function that we have here. Let's go all the way down to the list component and let's add a prop called reorder list. Inside of reorder list, let's pass in setItems. Make sure that you click Save and let's head back to our list.js file. Let's use destructuring to get access to reorder list.

[3:05] Let's pass in reorder list, two of the honoree order prop. The next thing you want to do is take the items that we actually want to make re-orderable and turn them into reorder item components. Let's take this motion.li, which represents each item on this list and change it to reorder.

[3:34] I don't know. I'm going to add a period here. Now it's a reorder item component. Let's make sure we change the closing tag as well. Reorder.item. The cool thing about reorder.item components is that they're just motion components under the hood.

[4:00] All of these props that we added earlier still work on reorder.item components. Reorder.item components actually automatically become draggable by default. You don't have to add a drag prop or anything like that to make it draggable.

[4:18] Reorder.item components do require one prop and that is the value prop. The value prop is for Framer Motion to keep track of the item that is being dragged in the list. For this, we will pass in item. Make sure that we hit Save. Refresh the page.

[4:41] Now as you see, we're able to grab each item, drag it, and reorder it. Framer Motion handles the z-index, the animation of the reordering, and all you have to do is add in a few props and a few components.

[4:58] To recap, you import reorder from Framer Motion, wrap the list of items that you want to reorder with the reorder.group component. Make sure that you pass in a axis prop, as well as a values prop to represent which items you want to reorder, and the reorder prop with the function that will update the state of the items that you wanted reordered.

[5:23] Lastly, the items that you want to be able to reorder, make them a reorder.item component, and passing a value prop for Framer Motion to keep track of the item that's being dragged.