tessl/npm-react-rnd
React component for creating draggable and resizable UI elements with comprehensive interaction controls
—
Pending
drag-config.mddocs/
Drag Configuration
Configuration options for controlling dragging behavior including axis constraints, boundary limits, grid snapping, and interaction controls.
Capabilities
Drag Control
Enable or disable dragging functionality and constrain drag direction.
/**
* Completely disable dragging functionality
* When true, component cannot be moved by user interaction
*/
disableDragging?: boolean;
/**
* Constrain dragging to specific axis
* - 'x': Only horizontal movement
* - 'y': Only vertical movement
* - 'both': Movement in both directions (default)
* - 'none': No movement allowed (similar to disableDragging)
*/
dragAxis?: "x" | "y" | "both" | "none";Usage Examples:
// Disable dragging entirely
<Rnd
default={{ x: 100, y: 100, width: 200, height: 150 }}
disableDragging={true}
>
Only resizable, not draggable
</Rnd>
// Horizontal-only dragging
<Rnd
default={{ x: 0, y: 100, width: 200, height: 150 }}
dragAxis="x"
>
Slides horizontally only
</Rnd>
// Vertical-only dragging
<Rnd
default={{ x: 100, y: 0, width: 200, height: 150 }}
dragAxis="y"
>
Slides vertically only
</Rnd>Drag Handle
Specify which part of the component should act as the drag handle.
/**
* CSS class name selector for drag handle
* Only elements with this class will initiate drag operations
* If not specified, entire component is draggable
*/
dragHandleClassName?: string;Usage Examples:
// Title bar as drag handle
<Rnd
default={{ x: 0, y: 0, width: 300, height: 200 }}
dragHandleClassName="drag-handle"
>
<div>
<div className="drag-handle" style={{ background: '#ccc', padding: '10px' }}>
Drag me to move the window
</div>
<div style={{ padding: '10px' }}>
Content area - clicking here won't drag
</div>
</div>
</Rnd>
// Icon as drag handle
<Rnd
default={{ x: 0, y: 0, width: 250, height: 150 }}
dragHandleClassName="drag-icon"
>
<div>
<span className="drag-icon">⋮⋮</span>
<span>Content with drag icon</span>
</div>
</Rnd>Drag Grid Snapping
Snap dragging movement to a grid for aligned positioning.
/**
* Snap dragging to grid increments
* Array of [x_increment, y_increment] in pixels
* Default: [1, 1] (no visible snapping)
*/
dragGrid?: Grid; // [number, number]Usage Examples:
// Snap to 20px grid
<Rnd
default={{ x: 0, y: 0, width: 200, height: 150 }}
dragGrid={[20, 20]}
>
Snaps to 20px grid when dragging
</Rnd>
// Different horizontal and vertical snapping
<Rnd
default={{ x: 0, y: 0, width: 200, height: 150 }}
dragGrid={[50, 25]}
>
50px horizontal, 25px vertical grid
</Rnd>Boundary Constraints
Constrain dragging within specific boundaries.
/**
* Movement boundaries for dragging
* - 'parent': Constrain within offsetParent element
* - 'window': Constrain within browser window
* - 'body': Constrain within document body
* - CSS selector string: Constrain within selected element
* - Element: Constrain within specific DOM element
*/
bounds?: string | Element;Usage Examples:
// Constrain within parent element
<div style={{ width: 500, height: 400, border: '1px solid #ccc', position: 'relative' }}>
<Rnd
default={{ x: 0, y: 0, width: 200, height: 150 }}
bounds="parent"
>
Stays within parent container
</Rnd>
</div>
// Constrain within browser window
<Rnd
default={{ x: 100, y: 100, width: 200, height: 150 }}
bounds="window"
>
Cannot be dragged outside viewport
</Rnd>
// Constrain within specific element
<div>
<div id="drag-area" style={{ width: 600, height: 400, border: '2px solid blue' }}>
Drag boundary area
</div>
<Rnd
default={{ x: 0, y: 0, width: 200, height: 150 }}
bounds="#drag-area"
>
Limited to blue boundary area
</Rnd>
</div>Drag Interaction Controls
Control how drag interactions are initiated and handled.
/**
* CSS selector for elements that should prevent drag initiation
* Useful for interactive elements within draggable content
*/
cancel?: string;
/**
* Allow dragging with any mouse button (not just left-click)
* Default: false (only left mouse button initiates drag)
*/
allowAnyClick?: boolean;
/**
* Position offset for drag positioning calculations
* Advanced prop for custom drag positioning behavior
* Imported from react-draggable's DraggableProps
*/
dragPositionOffset?: import("react-draggable").DraggableProps["positionOffset"];Usage Examples:
// Prevent drag from interactive elements
<Rnd
default={{ x: 0, y: 0, width: 300, height: 200 }}
cancel=".no-drag"
>
<div>
<div>Draggable area</div>
<button className="no-drag">Button won't start drag</button>
<input className="no-drag" placeholder="Input won't start drag" />
</div>
</Rnd>
// Allow right-click dragging
<Rnd
default={{ x: 0, y: 0, width: 200, height: 150 }}
allowAnyClick={true}
>
Can be dragged with any mouse button
</Rnd>
// Complex cancel selector
<Rnd
default={{ x: 0, y: 0, width: 350, height: 250 }}
cancel="button, input, select, textarea, .interactive"
>
<div>
<div>Draggable header</div>
<button>Won't drag</button>
<div className="interactive">Won't drag</div>
<div>This area will drag</div>
</div>
</Rnd>Advanced Configuration
User Select Hack
Control text selection behavior during drag operations.
/**
* Add 'user-select: none' to document body during drag
* Prevents text selection artifacts during drag operations
* Default: undefined (hack is enabled)
* Set to false if it causes issues with your app
*/
enableUserSelectHack?: boolean;Scale Support
Handle dragging in scaled/transformed contexts.
/**
* Scale factor for drag calculations
* Use when component is inside scaled/transformed containers
* Default: 1 (no scaling)
*/
scale?: number;Usage Examples:
// Dragging in scaled container
<div style={{ transform: 'scale(0.8)' }}>
<Rnd
default={{ x: 0, y: 0, width: 200, height: 150 }}
scale={0.8}
>
Correct drag behavior in scaled container
</Rnd>
</div>Install with Tessl CLI
npx tessl i tessl/npm-react-rnd