react-rnd is a JavaScript UI interaction library and React component used to create elements that are both draggable and resizable within a browser window. It functions as a constraint-based layout component that wraps DOM elements to enforce boundaries, grid snapping, and aspect ratio locks during manual adjustments.
The library allows for the definition of custom interaction handles to act as the primary triggers for dragging and resizing actions. It supports axis restrictions, boundary limits, and the ability to round position and dimension values to specified pixel increments.
The system provides event-driven tracking that triggers callbacks at the start, progression, and completion of movement or scaling. It manages the spatial state of elements through a hybrid of internal state and controlled properties to maintain precise layout control.
