0
# Component API
1

2
The Rnd component is the core of react-rnd, providing both draggable and resizable functionality in a single React component.
3

4
## Capabilities
5

6
### Rnd Component
7

8
The main React component that wraps content to make it draggable and resizable.
9

10
```typescript { .api }
11
/**
12
 * React component that makes its children draggable and resizable
13
 * Extends React.PureComponent with comprehensive prop interface
14
 */
15
class Rnd extends React.PureComponent<Props, State> {
16
  /** Default prop values */
17
  static defaultProps: {
18
    maxWidth: number;
19
    maxHeight: number;
20
    scale: number;
21
    onResizeStart: () => void;
22
    onResize: () => void;
23
    onResizeStop: () => void;
24
    onDragStart: () => void;
25
    onDrag: () => void;
26
    onDragStop: () => void;
27
  };
28

29
  /** Programmatically update component size */
30
  updateSize(size: { width: number | string; height: number | string }): void;
31
  
32
  /** Programmatically update component position */
33
  updatePosition(position: Position): void;
34
}
35

36
interface Props {
37
  // Size and Position
38
  default?: { x: number; y: number; width?: number | string; height?: number | string };
39
  position?: { x: number; y: number };
40
  size?: { width: string | number; height: string | number };
41
  minWidth?: number | string;
42
  minHeight?: number | string;
43
  maxWidth?: number | string;
44
  maxHeight?: number | string;
45

46
  // Drag Configuration
47
  disableDragging?: boolean;
48
  dragAxis?: "x" | "y" | "both" | "none";
49
  dragHandleClassName?: string;
50
  dragGrid?: Grid;
51
  bounds?: string | Element;
52
  cancel?: string;
53
  allowAnyClick?: boolean;
54
  dragPositionOffset?: DraggableProps["positionOffset"];
55

56
  // Resize Configuration
57
  enableResizing?: ResizeEnable;
58
  resizeGrid?: Grid;
59
  resizeHandleStyles?: HandleStyles;
60
  resizeHandleClasses?: HandleClasses;
61
  resizeHandleComponent?: HandleComponent;
62
  resizeHandleWrapperClass?: string;
63
  resizeHandleWrapperStyle?: React.CSSProperties;
64
  lockAspectRatio?: boolean | number;
65
  lockAspectRatioExtraWidth?: number;
66
  lockAspectRatioExtraHeight?: number;
67

68
  // Event Handlers
69
  onDragStart?: RndDragCallback;
70
  onDrag?: RndDragCallback;
71
  onDragStop?: RndDragCallback;
72
  onResizeStart?: RndResizeStartCallback;
73
  onResize?: RndResizeCallback;
74
  onResizeStop?: RndResizeCallback;
75
  onMouseDown?: (e: MouseEvent) => void;
76
  onMouseUp?: (e: MouseEvent) => void;
77

78
  // Styling
79
  className?: string;
80
  style?: React.CSSProperties;
81
  children?: React.ReactNode;
82

83
  // Advanced
84
  enableUserSelectHack?: boolean;
85
  scale?: number;
86
  dragPositionOffset?: import("react-draggable").DraggableProps["positionOffset"];
87
  
88
  // Extension - allows any additional props to be passed through
89
  [key: string]: any;
90
}
91
```
92

93
**Usage Examples:**
94

95
```typescript
96
import React, { useRef } from "react";
97
import { Rnd } from "react-rnd";
98

99
// Basic usage with default positioning
100
function BasicExample() {
101
  return (
102
    <Rnd
103
      default={{
104
        x: 0,
105
        y: 0,
106
        width: 320,
107
        height: 200,
108
      }}
109
    >
110
      <div>Draggable and resizable content</div>
111
    </Rnd>
112
  );
113
}
114

115
// Controlled component with state management
116
function ControlledExample() {
117
  const [state, setState] = React.useState({
118
    x: 0,
119
    y: 0,
120
    width: 320,
121
    height: 200,
122
  });
123

124
  return (
125
    <Rnd
126
      size={{ width: state.width, height: state.height }}
127
      position={{ x: state.x, y: state.y }}
128
      onDragStop={(e, d) => {
129
        setState(prev => ({ ...prev, x: d.x, y: d.y }));
130
      }}
131
      onResizeStop={(e, direction, ref, delta, position) => {
132
        setState({
133
          width: ref.style.width,
134
          height: ref.style.height,
135
          ...position,
136
        });
137
      }}
138
    >
139
      <div>Controlled draggable and resizable content</div>
140
    </Rnd>
141
  );
142
}
143

144
// Using ref for programmatic control
145
function ProgrammaticExample() {
146
  const rndRef = useRef<Rnd>(null);
147

148
  const updateSize = () => {
149
    if (rndRef.current) {
150
      rndRef.current.updateSize({ width: 400, height: 300 });
151
    }
152
  };
153

154
  const updatePosition = () => {
155
    if (rndRef.current) {
156
      rndRef.current.updatePosition({ x: 100, y: 100 });
157
    }
158
  };
159

160
  return (
161
    <div>
162
      <button onClick={updateSize}>Resize to 400x300</button>
163
      <button onClick={updatePosition}>Move to (100, 100)</button>
164
      <Rnd
165
        ref={rndRef}
166
        default={{ x: 0, y: 0, width: 320, height: 200 }}
167
      >
168
        <div>Programmatically controlled content</div>
169
      </Rnd>
170
    </div>
171
  );
172
}
173
```
174

175
### updateSize Method
176

177
Programmatically update the component's size, bypassing normal prop updates.
178

179
```typescript { .api }
180
/**
181
 * Programmatically update component size
182
 * @param size - New width and height values
183
 * @param size.width - New width (number in pixels or string with units)
184
 * @param size.height - New height (number in pixels or string with units)
185
 */
186
updateSize(size: { width: number | string; height: number | string }): void;
187
```
188

189
### updatePosition Method
190

191
Programmatically update the component's position, bypassing grid and bounds constraints.
192

193
```typescript { .api }
194
/**
195
 * Programmatically update component position
196
 * @param position - New x and y coordinates
197
 * @param position.x - New x coordinate in pixels
198
 * @param position.y - New y coordinate in pixels
199
 */
200
updatePosition(position: Position): void;
201
```
202

203
## Default Props
204

205
The Rnd component comes with sensible default values:
206

207
```typescript
208
{
209
  maxWidth: Number.MAX_SAFE_INTEGER,
210
  maxHeight: Number.MAX_SAFE_INTEGER,
211
  scale: 1,
212
  onResizeStart: () => {},
213
  onResize: () => {},
214
  onResizeStop: () => {},
215
  onDragStart: () => {},
216
  onDrag: () => {},
217
  onDragStop: () => {},
218
}
219
```
220

221
## Advanced Props
222

223
These props provide fine-grained control over component behavior for special use cases:
224

225
### Scale Prop
226

227
```typescript { .api }
228
/**
229
 * Scale factor for all size and position calculations
230
 * Used when component is rendered in a scaled container (CSS transform: scale)
231
 * Affects boundary calculations and positioning accuracy
232
 * @default 1
233
 */
234
scale?: number;
235
```
236

237
**Usage Example:**
238
```typescript
239
// When component is in a scaled container
240
<div style={{ transform: 'scale(0.5)' }}>
241
  <Rnd
242
    scale={0.5}
243
    default={{ x: 0, y: 0, width: 200, height: 200 }}
244
    bounds="parent"
245
  >
246
    Content in scaled container
247
  </Rnd>
248
</div>
249
```
250

251
### Enable User Select Hack
252

253
```typescript { .api }
254
/**
255
 * Enables a workaround for user-select behavior during drag operations
256
 * Prevents text selection issues while dragging in some browsers
257
 * @default undefined
258
 */
259
enableUserSelectHack?: boolean;
260
```
261

262
### Drag Position Offset
263

264
```typescript { .api }
265
/**
266
 * Advanced position offset configuration for drag calculations
267
 * Passes through to react-draggable's positionOffset prop
268
 * Used for custom positioning behavior
269
 */
270
dragPositionOffset?: import("react-draggable").DraggableProps["positionOffset"];
271
```
272

273
## Component State
274

275
The component maintains internal state for:
276
- Resize bounds calculations
277
- Maximum size constraints during resize operations
278
- Current resize state (boolean flag)
279
- Offset calculations for positioning