Components
Draggable
A versatile draggable list component with customizable items and smooth reordering.
Previews with Code
Example 1: Simple Draggable List
Simple Draggable List
Item 1
Item 2
Item 3
Item 4
Example 2: Custom Draggable List
Custom Draggable List
Task 1
Description of Task 1
Task 2
Description of Task 2
Task 3
Description of Task 3
Task 4
Description of Task 4
Installation
The Draggable component is a powerful tool for building sortable lists with custom rendering capabilities and smooth drag-and-drop interactions.
Quickly add the component using:
File Structure
draggable.tsx
Props
Draggable Props
| Prop | Type | Default |
|---|---|---|
items | T[] | - |
onItemsChange | (items: T[]) => void | - |
renderItem | (item: T, index: number) => React.ReactNode | - |
idKey | keyof T | "id" |
className | string | - |
Features
- Drag-and-Drop Sorting:
- Rearrange list items via drag-and-drop with smooth animations.
- Custom Rendering:
- Render items dynamically using the
renderItemprop.
- Render items dynamically using the
- Keyboard Accessibility:
- Fully supports keyboard interactions for reordering items.
- Flexibility:
- Compatible with any array structure by defining a custom
idKey.
- Compatible with any array structure by defining a custom
Accessibility
The Draggable component supports full keyboard navigation and includes ARIA attributes for screen readers, ensuring WCAG compliance.
Conclusion
The Draggable component is a highly flexible and accessible solution for building sortable lists with custom rendering and seamless drag-and-drop interactions.