@atlaskit/pragmatic-drag-and-drop
v1.7.10 Apache-2.0The core package for Pragmatic drag and drop - enabling fast drag and drop for any experience on any tech stack
@atlaskit/pragmatic-drag-and-drop Download Trends
About @atlaskit/pragmatic-drag-and-drop
The @atlaskit/pragmatic-drag-and-drop package offers a highly optimized and accessible solution for implementing drag-and-drop functionality across web applications. It addresses the common challenge of building fluid, interactive user interfaces where users can reorder elements, move them between containers, or initiate actions by dragging. The library aims to provide a performant foundation that is robust enough for complex interactions while remaining performant, ensuring a smooth user experience even with a large number of draggable items.
This package is built with a focus on pragmatism, seeking to offer a predictable and maintainable API that prioritizes developer experience and accessibility. Its design goals include enabling fast drag and drop for any experience, regardless of the underlying technology stack. This makes it suitable for teams working with various frontend frameworks and custom UI components who require a reliable drag-and-drop system.
The core API revolves around a declarative approach, often utilized with hooks to manage the state and behavior of draggable and droppable elements. Key concepts include registering " Draggable " and " DropZone " elements, defining interactions through " DragOperation " and " DropTarget ". The library facilitates customizability by allowing developers to control visual feedback during drag operations and define the logic for successful drops.
Integration is designed to be framework-agnostic, making it adaptable to different frontend ecosystems. While it can be used with popular libraries like React, its underlying principles are based on DOM events and custom elements, allowing for adoption in vanilla JavaScript projects or integration with templating engines. The focus on core web standards enhances its versatility across diverse build processes and application architectures.
With a reported extremely small gzip bundle size of 57 B, this package emphasizes performance efficiency. Despite its minimal footprint, it delivers powerful drag-and-drop capabilities. The library has seen significant adoption, evidenced by its 909.9K weekly downloads and 12.6K GitHub stars, suggesting a mature and well-tested solution for demanding UI interactions.
Developers should be aware that the extensibility offered by this package implies a learning curve associated with its core patterns and event-driven architecture. While robust, complex custom drag experiences might require careful management of state and event handlers to ensure optimal performance and predictability. Understanding the lifecycle of drag operations and drop targets is crucial for effective implementation.
When to use
- When implementing sortable lists or grids using the `sortable` topic and associated patterns.
- When building multi-functional drop zones that can accept various draggable items and trigger distinct actions.
- When requiring accessible drag-and-drop interactions that cater to users with assistive technologies.
- When integrating custom drag-and-drop logic into existing web applications without a specific framework dependency.
- When optimizing for performance with a minimal bundle size, leveraging the 57 B gzip size.
- When building complex interactive UIs that demand precise control over drag start, impact, and drop events.
When NOT to use
- If your primary need is for a simple, visually guided drag-and-drop interface with minimal custom logic, a lighter alternative focusing solely on UI might be more suitable.
- When implementing drag-and-drop exclusively within a highly opinionated component library that provides its own drag-and-drop primitives.
- If you need to manage complex, non-DOM-related state solely through drag-and-drop interactions without a clear mapping to visual elements.
- If the project has strict constraints against registering global event listeners or relies on an environment that heavily virtualizes DOM events.
- When building an application where the performance bottleneck is not related to drag-and-drop interactions and adding this package would introduce unnecessary complexity.