atlassian/react-beautiful-dndArchived
React Beautiful Dnd
This project is a declarative drag-and-drop library designed for building accessible and fluid interface interactions within web applications. It provides a component-based interface for managing complex list reordering and spatial relationships between elements, utilizing a specialized state container to coordinate movement logic.
The library distinguishes itself through a focus on accessibility, maintaining a live connection between visual drag states and the browser accessibility tree to support screen readers and keyboard navigation. It optimizes performance by bypassing standard component re-rendering cycles during active interactions, instead manipulating DOM nodes directly and employing hardware-accelerated animations to ensure smooth transitions.
The system handles the lifecycle of moving elements between containers through centralized state management and event delegation. It is currently documented as a deprecated project, with guidance available for users regarding maintenance or migration paths.
Features
- Declarative Drag-and-Drop Libraries - Provides a component-based interface for building accessible and fluid drag-and-drop interactions using a declarative state model.
- Accessible Interaction Toolkits - Provides specialized components to ensure complex mouse and keyboard-driven interface patterns remain usable for all.
- List Reordering Components - Manages the visual rearrangement of items within lists while maintaining smooth animations and predictable state.
- Awesome List - A community-curated directory that catalogs and links out to other open-source projects, rather than a standalone tool you run yourself.
- Accessibility Utilities - Maintains a live connection between visual drag states and the browser accessibility tree for screen reader accuracy.
- Accessible Interaction Patterns - Ensures drag-and-drop experiences remain fully functional and intuitive for keyboard and screen reader users.
- Component State Managers - Coordinates complex spatial relationships and movement logic between interactive elements in a browser environment.
- Drag and Drop - Accessible drag-and-drop for lists.
- DOM Reconciliation Utilities - Bypasses standard component re-rendering cycles during active drags to maintain high frame rates.
- State Management Libraries - Centralizes the drag-and-drop lifecycle state in a single store to synchronize complex interactions across independent components.
- Animation Frameworks - Uses hardware-accelerated transforms to animate list items smoothly without triggering layout recalculations.
- Component Orchestration Tools - Handles the complex lifecycle of moving elements between different containers while keeping data models synchronized.
