$ show react-grid-layout/react-draggable
react-draggable is a mature, well-maintained React library that provides two components for making elements draggable: `<Draggable>` (a high-level, state-managed component that applies CSS transforms) and `<DraggableCore>` (a low-level, stateless primitive that fires raw drag events). The library handles mouse and touch events, supports axis constraints, bounds (parent, selector, or numeric), grid snapping, scaling, and controlled/uncontrolled position modes. It uses CSS transforms for positioning, avoiding conflicts with CSS layout. The codebase was recently migrated from Flow to TypeScript (v4.6.0), ships CommonJS, ESM, and UMD builds, and includes a comprehensive test suite (unit tests in jsdom + browser tests via Puppeteer). The architecture is clean: `Draggable` wraps `DraggableCore`, adding state management and transform application, while utility modules (`domFns`, `positionFns`, `getPrefix`, `shims`) handle DOM operations, position calculations, browser prefix detection, and general helpers. The library is actively maintained with recent commits, a thorough CI pipeline, and detailed documentation including a CSP nonce feature and React 19 compatibility.
The LLM identified 5 files worth highlighting for reuse:
Provides a set of DOM helper functions for event binding (addEvent/removeEvent with fallbacks for attachEvent and legacy on-event assignment), CSS transform creation (with browser prefix detection and position offset support), SVG transform creation, user-select hack injection (with CSP nonce support), and class name manipulation. These functions are self-contained, well-tested, and could be extracted into a separate utility package for any project needing cross-browser event handling or transform generation.
Implements core position logic: bound position calculation (supporting object bounds, 'parent', and CSS selector bounds with proper padding/margin accounting), grid snapping, axis constraint checking, and creation of drag event data objects (core data for DraggableCore and scaled data for Draggable). The bounds calculation is particularly sophisticated, handling offsetParent, computed styles, and Shadow DOM. This module is isolated and could be reused in any drag-related project.
Detects the correct browser vendor prefix (Moz, Webkit, O, ms) for CSS properties by checking the document element's style object. Includes helper functions to convert between kebab-case property names and camelCase prefixed keys, and to generate CSS-style prefixed property strings. This is a small, self-contained utility that could be used in any project requiring runtime prefix detection.
Contains generic utility functions: findInArray (works on array-like objects), isFunction (handles async/generator functions), isNum (rejects NaN), int (parseInt with string cleanup), and dontSetMe (prop validation helper). These are simple but well-crafted and could be extracted into a shared utility library.
The core drag primitive: a stateless React component that handles mouse and touch events, manages drag state (dragging flag, last position, touch identifier), and fires onStart/onDrag/onStop callbacks with position data. It supports handle/cancel selectors, grid snapping, scale, and user-select hack. It is designed to be reused by higher-level components (like Draggable) or directly by advanced users who need full control over positioning. The component is well-isolated with clear prop interfaces and could serve as a standalone drag primitive for other libraries.