Project Files
Drag the handle to reorder items
Q3 Financial Report.pdf
2.4 MB
Brand Assets 2024.zip
145 MB
Product Demo Reel.mp4
890 MB
Ambient Background.wav
45 MB
Overview
The DragReorder component leverages framer-motion's highly capable <Reorder> API to create a fluid, physics-driven drag-and-drop experience. It includes native drag handles, elevation physics (shadow and scale on drag), and seamless list reordering without the heavy overhead of traditional drag-and-drop libraries like dnd-kit or react-beautiful-dnd.
Installation
npm install framer-motion lucide-react
Usage
import { DragReorder } from "@/components/creative/drag-reorder"
import { GripVertical } from "lucide-react"
import { useState } from "react"
export default function SortableList() {
const [items, setItems] = useState([
{ id: "1", title: "Task One" },
{ id: "2", title: "Task Two" }
])
return (
<DragReorder
items={items}
onReorder={setItems}
keyExtractor={(item) => item.id}
renderItem={(item, index, dragControls) => (
<div className="flex gap-4 p-4 bg-zinc-900 border border-white/10 rounded-xl">
<div
className="cursor-grab text-zinc-500 hover:text-white"
onPointerDown={(e) => dragControls.start(e)}
>
<GripVertical />
</div>
<span className="text-white">{item.title}</span>
</div>
)}
/>
)
}
Usage Guide
1. Import the Component
Import the component into your React or Next.js page:
import { DragReorder } from "@/components/creative/drag-reorder";
2. Implementation Example
Render the component and customize its behavior by passing props:
import { DragReorder } from "@/components/creative/drag-reorder";
export default function Example() {
return (
<div className="w-full flex items-center justify-center p-8">
<DragReorder
items{/* value */}
onReorder{/* value */}
renderItem{/* value */}
/>
</div>
);
}