Is state persistence included in the patterns?

The skill provides clear guidance and best practices for capturing reorder events and persisting that state to a backend or local database.

What library does this skill use?

This skill focuses on implementing drag-and-drop patterns using the modern, lightweight @dnd-kit library for React.

Does it support vertical list sorting?

Yes, the skill includes specific implementations and strategies for vertical list sorting out of the box.

Can I use this for complex UI reordering?

Yes, the patterns are designed to be scalable for various UI needs, ranging from simple lists to complex, interactive dashboard components.

How does it handle item accessibility?

The provided patterns utilize @dnd-kit's built-in attributes and listeners to maintain ARIA standards and ensure keyboard navigation support.

React DnD Kit Patterns

Name: React DnD Kit Patterns
Author: retex73

byretex73

디자인 도구

Implements robust drag-and-drop functionality using @dnd-kit for seamless item reordering in React applications.

소개

This skill provides production-ready implementation patterns for @dnd-kit, enabling developers to integrate interactive drag-and-drop sortable lists into their React projects. It includes pre-configured components for SortableContext and DndContext, handling complex collision detection and state management. By following these patterns, developers can ensure accessible, performant, and user-friendly interfaces for tasks like reordering lists, managing dashboards, or organizing application resources.

주요 기능

Standardized @dnd-kit boilerplate for vertical lists
Pre-configured collision detection using the closestCenter algorithm
Best practices for state persistence and state mutation safety
Sortable item wrappers with built-in transform and transition logic
Visual feedback implementation patterns for active drag states
0 GitHub stars

사용 사례

Managing task priorities in a kanban-style project board
Reordering music tracks or tune versions in a media player
Organizing custom dashboard widgets via drag-and-drop interfaces

소개

주요 기능

Standardized @dnd-kit boilerplate for vertical lists
Pre-configured collision detection using the closestCenter algorithm
Best practices for state persistence and state mutation safety
Sortable item wrappers with built-in transform and transition logic
Visual feedback implementation patterns for active drag states
0 GitHub stars

사용 사례

Managing task priorities in a kanban-style project board
Reordering music tracks or tune versions in a media player
Organizing custom dashboard widgets via drag-and-drop interfaces