Chapter 30: Reorder

Core Idea

Create drag-to-reorder lists and grids with Motion for React's Reorder components. Reorder.Group automatically detects the drag axis and manages each Reorder.Item.

Key Concepts

• Drag axis: Reorder.Group detects the drag axis from the position of its items.
• Find & fix animation performance issues with your agent.: MotionScore for Agents grades animations in your source code S to F and hands your agent s
• Exit animations: AnimatePresence can be used as normal to animate items as they enter/leave the React tree.
• Drag triggers: By default
• Auto-scroll lists: If a Reorder.Group is within a scrollable container
• z-index: Reorder.Item will automatically set a z-index style on the currently dragged item so it ap
• API: Default: "ul"
• Reorder.Group: Default: "ul"
• as: Default: "ul"

Code Examples

const [items, setItems] = useState([0, 1, 2, 3])

return (
  <Reorder.Group values={items} onReorder={setItems}>
    {items.map((item) => (
      <Reorder.Item key={item} value={item}>
        {item}
      </Reorder.Item>
    ))}
  </Reorder.Group>
)

• What it demonstrates: Core usage pattern for Reorder.

Key Takeaways

1. Reorder supports Drag axis.
2. Reorder supports Find & fix animation performance issues with your agent..
3. Reorder supports Exit animations.

Connects To

• React motion component: related Motion doc page.
• Layout Animation: related Motion doc page.
• AnimatePresence: related Motion doc page.
• React drag animation guide: related Motion doc page.
• To-do list example & tutorial for React: related Motion doc page.