clauderic/dnd-kit

Features

• Drag and Drop Libraries - Provides a modular toolkit for building accessible, component-based drag-and-drop interfaces in React.
• List Reordering Components - Enables intuitive reordering of list items through drag-and-drop interactions within single or multiple containers.
• Accessibility Management - Provides automated screen reader announcements and accessibility attribute management to ensure drag-and-drop interfaces remain inclusive.
• Accessible Interaction Patterns - Provides utilities for creating inclusive drag-and-drop experiences that handle screen reader announcements and keyboard navigation.
• Accessible UI Components - Ensures inclusive interface elements through automated screen reader announcements and accessibility attribute management.
• Drag and Drop Interactions - Coordinates drag-and-drop state and communication between components using a central provider.
• Drag Boundary Constraints - Provides configurable constraints to restrict the movement of draggable elements within specific containers or coordinate boundaries.
• Input Normalization Utilities - Normalizes mouse, touch, and keyboard events into a unified stream of interaction commands.
• Interaction Customizers - Tailors drag behavior with specialized sensors, movement constraints, and collision detection to meet unique design requirements.
• Component-Based UI Libraries - Offers a collection of reusable primitives for managing complex state and spatial interactions in web interfaces.
• Interaction Lifecycle Managers - Manages the lifecycle of drag-and-drop operations by configuring sensors, plugins, and modifiers.
• Drag Handles - Limits the initiation of drag operations to specific sub-elements to prevent accidental triggers.
• Snapping Behaviors - Enables precise element positioning by restricting movement to predefined grid patterns or alignment points.
• Drag-and-Drop Event Callbacks - Executes custom logic and interface updates during specific phases of drag-and-drop interactions via event callbacks.
• Multi-Input Interaction Handlers - Detects and normalizes interactions from mouse, touch, pen, and keyboard inputs for drag-and-drop operations.
• State Management Providers - Coordinates drag lifecycle events and synchronizes data between draggable items and drop targets using hierarchical context providers.
• Custom Drag Behaviors - Allows developers to inject custom logic or visual effects into the drag-and-drop lifecycle by attaching modular plugins.
• Event-Driven Plugin Hooks - Allows developers to inject custom logic into specific phases of the drag-and-drop interaction process via event-driven hooks.
• Scroll Thresholds - Automatically scrolls containers when dragged items approach edges to keep them visible during movement.
• Drag Operation Controls - Governs the visual representation of elements during drag operations, including cloning and hiding behaviors.
• Drag and Drop Configurations - Adjusts drag-and-drop movement, constraints, and transformations using a modular architecture to tailor the user experience.
• Interaction Modifiers - Intercepts and adjusts coordinate data to enforce movement constraints, snapping, and custom transformation logic.
• Input Handling - Implements custom sensor logic to support unique input devices and specialized interaction patterns.
• Interactive Element Registries - Maintains a registry of draggable and droppable elements to enable coordinate detection and collision resolution.
• Layout Animation Engines - Applies smooth visual transitions to elements when their order changes to provide clear feedback during layout updates.
• Optimistic Updates - Updates the visual order of elements immediately during drag operations to ensure a responsive and fast-feeling interface.
• Collision Detection - Calculates spatial intersections between moving elements and target zones to determine valid drop states.
• Drag Debugging Overlays - Renders debug overlays for drag shapes, drop zones, and collision boundaries to assist in troubleshooting complex interface interactions.
• Activation Handlers - Enables users to initiate drag-and-drop interactions on specific interface elements by attaching movement behavior to them.
• Draggable Element Definitions - Enables interface components to be moved by assigning unique identifiers and references to the elements that users can interact with.
• Draggable Element Registries - Registers specific elements as draggable items and attaches optional handles or toggleable states to initiate interactions.
• Drop Target Registries - Restricts which drop zones can accept specific draggable items by matching their assigned types during the interaction process.
• Compatibility Restrictions - Limits which draggable items can be placed into a specific target by validating item types against defined acceptance criteria.
• Interaction Feedback Effects - Coordinates visual state changes and layering animations to provide responsive feedback during drag interactions.
• Interaction Tracking - Maintains a centralized store of interactive components to enable efficient spatial lookups during drag operations.

Star history