To-do list

Introduction

The To-do list example demonstrates how to create an interactive to-do list with Motion for React's Reorder component.

Items can be freely reordered, but when a task is checked off, it animates with a strikethrough effect before moving to the bottom of the list.

In this tutorial, we'll learn to use:

• Reorder.Group and Reorder.Item for drag-to-reorder functionality
• motion components for animated strikethrough and opacity effects
• useMotionValue and animate for animated drag shadows

Get started

Let's begin by setting up the basic structure and data model for our to-do list. Each item stores its own color so it stays consistent when reordered:

"use client"

import { useState } from "react"

interface TodoItem {
    id: number
    text: string
    completed: boolean
    color: string
}

const COLORS = [
    "#ff0088",
    "#dd00ee",
    "#9911ff",
    "#1e75f7",
    "#0cdcf7",
    "#8df0cc",
]

const initialTodos: TodoItem[] = [
    {
        id: 0,
        text: "Review project proposal",
        completed: false,
        color: COLORS[0],
    },
    { id: 1, text: "Update documentation", completed: false, color: COLORS[1] },
    {
        id: 2,
        text: "Schedule team meeting",
        completed: false,
        color: COLORS[2],
    },
    // ... more items - take from source code
]

export default function TodoList() {
    const [todos, setTodos] = useState(initialTodos)

    return (
        <div className="todo-container">
            <ul className="todo-list">
                {todos.map((todo) => (
                    <li key={todo.id} className="todo-item">
                        <span>{todo.text}</span>
                    </li>
                ))}
            </ul>
        </div>
    )
}

// Take styles from example source code.

The container has a fixed height with overflow: auto to demonstrate the Reorder component's autoscroll feature when dragging items beyond the visible area.