atlassianreact-beautiful-dndArchived

0

34,049 stars2,733 forksJavaScriptother4 viewsreact-beautiful-dnd.netlify.app

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.

Star history

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.