React-Draggable is a React component library that provides a simple, lightweight solution for making DOM elements draggable. The component wraps existing elements and extends them with drag functionality through new event handlers and styles, without creating additional wrapper elements in the DOM. It uses CSS Transforms to move items, which allows dragging to work regardless of the element's current positioning method, whether relative, absolute, or static.
The library offers two main components. The primary Draggable component is a batteries-included solution that manages its own state and handles positioning automatically. For developers requiring more granular control, DraggableCore provides drag callbacks without state management or automatic styling, allowing users to handle positioning themselves. This dual-component approach makes the library flexible for both simple drag implementations and complex custom scenarios.
The Draggable component supports an extensive set of configuration options through its props. Users can restrict movement to specific axes, define boundary constraints using parent elements or CSS selectors, snap dragging to a grid, specify drag handles, and control positioning through both uncontrolled and controlled patterns. The component includes accessibility features like the ability to cancel dragging on specific elements and supports mobile scrolling. It also provides comprehensive event callbacks including onStart, onDrag, and onStop handlers that fire at different stages of the drag lifecycle.
The library maintains compatibility across multiple React versions, supporting React 16.3 and above in version 4.x, with earlier versions supporting older React releases. TypeScript types are included, providing type safety for developers using TypeScript. The component addresses Content Security Policy concerns by allowing developers to pass a nonce prop or opt out of the injected user-select style entirely, with fallback support for webpack's nonce global.
According to GitGenius activity tracking, the repository shows median issue and pull request response latency of 8820.7 hours with a mean of 16799.2 hours across 52 tracked items. The most active contributor tracked is STRML with 6 events, followed by rhyek with 4 events and fujiokae with 3 events. Enhancement requests represent the most active issue label category. The repository shares overlapping contributors with significant projects including envoyproxy/envoy, microsoft/vscode, and mui/material-ui, indicating its use and influence within the broader React ecosystem.
The component is classified across multiple domains including react components, user interface design, responsive design, layout management, drag-and-drop functionality, and interactive elements. It serves as a foundational building block for more complex layout systems, as evidenced by its use in related projects like React-Grid-Layout and React-Resizable. The library is distributed under the MIT license and welcomes community contributions through its standard fork and pull request workflow.
