Search code examples
javascriptanimationreactjsreact-motion

Animate React rearranging of list items

I have an array of JSON objects that are used to render a list of elements:

mydata.map(thing => {
  return <SomeComponent key={thing._id} />
});

Each rendered item has up/down arrows, and if the user clicks the up arrow, for example, the item will be moved up the list. On the back end, the items in the array are simply swapped.

How can I make this process animate so it's easier for the user to see what the result of their action was? I was looking into react-motion, but it seems to work based on modifying CSS/styles. I was hoping there would be something that uses React's key property to determine unique elements and handle movement based on that.

Any suggestions?

Solution

  • React-flip-move is a wonderful component which allows you to animate children components. There is an example animation flipping values on a list too.