bokuweb/react-rnd
React Rnd
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.
Features
- Draggable and Resizable React Components - Provides a React component that makes DOM elements draggable and resizable with boundary constraints.
- Drag and Resize Functionality - Makes DOM elements movable by dragging and resizable by dragging edges or corners.
- Element Size Limits - Clamps draggable and resizable element dimensions to user-defined minimum and maximum values.
- Constraint Layout Engines - Calculates component geometry based on dynamic constraints during drag and resize operations.
- Aspect Ratio Constraints - Enforces width-to-height proportions on UI elements during interactive resizing.
- Draggable Resizable Placements - Creates interactive elements that users can freely move and resize within a browser window.
- React Drag and Resize Libraries - Provides a JavaScript library for creating interactive elements that support both dragging and resizing.
- Programmatic Position and Size - Provides imperative methods to programmatically set element position and dimensions.
- Drag Boundary Constraints - Restricts dragging within a specified parent, window, body, or CSS selector boundary.
- Drag Event Callbacks - Fires callbacks at start, during, and after drag or resize operations with position and size data.
- Grid Snapping - Snaps element position and size to configurable grid increments during drag and resize operations.
- Constraint Based Layouts - Enforces boundaries, grid snapping, and aspect ratio locks on draggable and resizable elements.
- Custom Resize Handles - Routes resize actions through user-defined React components or CSS selectors.
- Grid Snapping Arithmetic - Rounds position and dimension values to the nearest grid increment during movement or scaling.
- Hybrid State Management - Maintains internal spatial state for responsive interactions while exposing controlled properties.
- Drag Handles - Restricts dragging to only initiate when the user grabs a specific child element by class name.
- Drag Direction Restrictions - Limits dragging to only horizontal, only vertical, both, or none.
- Drag-and-Drop Event Callbacks - Chains start, move, and end callbacks for drag and resize actions.
- Element Resizers - Updates the size or position of draggable and resizable elements from code using imperative methods.
