DragDropList
A reorderable list powered by framer-motion. Drag items to rearrange them and the component calls onReorder with the new order. Headless-style API — you render each row yourself.
Interactive Demo
Grab any card and drag it up or down to reorder the todo list.
Design system audit
Review tokens and component coverage.
Write component docs
Cover props, usage, and edge cases.
Add visual regression tests
Baseline snapshots for motion components.
Deploy preview environment
Wire up Vercel preview for the docs app.
Ship release notes
Summarize the new framer-motion components.
Usage
import { DragDropList } from "@mantleui/react/motion";import { useState } from "react";
interface Todo { id: string; title: string;}
function TodoList() { const [todos, setTodos] = useState<Todo[]>([ { id: "1", title: "Design system audit" }, { id: "2", title: "Write component docs" }, { id: "3", title: "Deploy preview" }, ]);
return ( <DragDropList items={todos} onReorder={setTodos} keyAccessor={(todo) => todo.id} renderItem={(todo) => ( <div className="card"> <DragHandle /> <span>{todo.title}</span> </div> )} /> );}Props
| Prop | Type | Default | Description |
|---|---|---|---|
items | T[] | — | The current list of items. |
onReorder | (items: T[]) => void | — | Called with the new list order after a drag ends. |
renderItem | (item: T, index: number) => ReactNode | — | Render function for each item. |
keyAccessor | (item: T) => string | number | — | Returns a stable key for each item. Defaults to the item itself. |
itemsT[]The current list of items.
onReorder(items: T[]) => voidCalled with the new list order after a drag ends.
renderItem(item: T, index: number) => ReactNodeRender function for each item.
keyAccessor(item: T) => string | numberReturns a stable key for each item. Defaults to the item itself.