0
# Size and Position Control
1

2
Configuration options for controlling component size, position, constraints, and default values. React RnD supports both controlled and uncontrolled modes.
3

4
## Capabilities
5

6
### Default Size and Position
7

8
Set initial size and position for uncontrolled usage.
9

10
```typescript { .api }
11
/**
12
 * Default size and position for uncontrolled component
13
 * Sets initial values that can be changed by user interaction
14
 */
15
default?: {
16
  /** Initial x coordinate in pixels */
17
  x: number;
18
  /** Initial y coordinate in pixels */
19
  y: number;
20
  /** Initial width - number (pixels), string with units, or undefined for 'auto' */
21
  width?: number | string;
22
  /** Initial height - number (pixels), string with units, or undefined for 'auto' */
23
  height?: number | string;
24
};
25
```
26

27
**Usage Examples:**
28

29
```typescript
30
// Default positioning with automatic size
31
<Rnd
32
  default={{
33
    x: 100,
34
    y: 50,
35
    // width and height omitted = 'auto'
36
  }}
37
>
38
  Content will be sized automatically
39
</Rnd>
40

41
// Default positioning with specific size
42
<Rnd
43
  default={{
44
    x: 0,
45
    y: 0,
46
    width: 320,
47
    height: 200,
48
  }}
49
>
50
  Fixed size content
51
</Rnd>
52

53
// Default with string dimensions
54
<Rnd
55
  default={{
56
    x: 0,
57
    y: 0,
58
    width: "50%",
59
    height: "300px",
60
  }}
61
>
62
  Percentage and pixel dimensions
63
</Rnd>
64
```
65

66
### Controlled Position
67

68
Control position externally for fully controlled component behavior.
69

70
```typescript { .api }
71
/**
72
 * Controlled position - component position is managed externally
73
 * Use with onDrag/onDragStop callbacks to update position state
74
 */
75
position?: {
76
  /** X coordinate in pixels */
77
  x: number;
78
  /** Y coordinate in pixels */
79
  y: number;
80
};
81
```
82

83
### Controlled Size
84

85
Control size externally for fully controlled component behavior.
86

87
```typescript { .api }
88
/**
89
 * Controlled size - component size is managed externally
90
 * Use with onResize/onResizeStop callbacks to update size state
91
 */
92
size?: {
93
  /** Width - number (pixels) or string with units */
94
  width: string | number;
95
  /** Height - number (pixels) or string with units */
96
  height: string | number;
97
};
98
```
99

100
**Usage Examples:**
101

102
```typescript
103
// Fully controlled component
104
function ControlledRnd() {
105
  const [state, setState] = React.useState({
106
    x: 0,
107
    y: 0,
108
    width: 320,
109
    height: 200,
110
  });
111

112
  return (
113
    <Rnd
114
      size={{ width: state.width, height: state.height }}
115
      position={{ x: state.x, y: state.y }}
116
      onDragStop={(e, d) => {
117
        setState(prev => ({ ...prev, x: d.x, y: d.y }));
118
      }}
119
      onResizeStop={(e, direction, ref, delta, position) => {
120
        setState({
121
          width: ref.style.width,
122
          height: ref.style.height,
123
          ...position,
124
        });
125
      }}
126
    >
127
      Controlled content
128
    </Rnd>
129
  );
130
}
131
```
132

133
### Size Constraints
134

135
Set minimum and maximum size constraints.
136

137
```typescript { .api }
138
/**
139
 * Minimum width constraint
140
 * Can be number (pixels), string with units ('300px'), or percentage ('50%')
141
 */
142
minWidth?: number | string;
143

144
/**
145
 * Minimum height constraint
146
 * Can be number (pixels), string with units ('200px'), or percentage ('30%')
147
 */
148
minHeight?: number | string;
149

150
/**
151
 * Maximum width constraint
152
 * Can be number (pixels), string with units ('800px'), or percentage ('90%')
153
 */
154
maxWidth?: number | string;
155

156
/**
157
 * Maximum height constraint
158
 * Can be number (pixels), string with units ('600px'), or percentage ('80%')
159
 */
160
maxHeight?: number | string;
161
```
162

163
**Usage Examples:**
164

165
```typescript
166
// Numeric constraints (pixels)
167
<Rnd
168
  default={{ x: 0, y: 0, width: 320, height: 200 }}
169
  minWidth={200}
170
  minHeight={100}
171
  maxWidth={800}
172
  maxHeight={600}
173
>
174
  Size constrained content
175
</Rnd>
176

177
// String constraints with units
178
<Rnd
179
  default={{ x: 0, y: 0, width: "40%", height: "300px" }}
180
  minWidth="200px"
181
  minHeight="100px"
182
  maxWidth="80%"
183
  maxHeight="500px"
184
>
185
  Mixed unit constraints
186
</Rnd>
187

188
// Percentage constraints
189
<Rnd
190
  default={{ x: 0, y: 0, width: "50%", height: "40%" }}
191
  minWidth="20%"
192
  minHeight="10%"
193
  maxWidth="90%"
194
  maxHeight="80%"
195
>
196
  Percentage constrained content
197
</Rnd>
198
```
199

200
## Constraint Resolution
201

202
When constraints are specified:
203

204
1. **Pixel values**: Used directly as pixel constraints
205
2. **Percentage values**: Calculated relative to parent container size
206
3. **String with 'px'**: Parsed to numeric pixel values
207
4. **Bounds interaction**: Size constraints work with boundary constraints
208
5. **Aspect ratio interaction**: Size constraints are applied after aspect ratio calculations
209

210
## Controlled vs Uncontrolled Patterns
211

212
### Uncontrolled (Recommended for simple cases)
213

214
```typescript
215
<Rnd
216
  default={{ x: 0, y: 0, width: 320, height: 200 }}
217
  minWidth={200}
218
  maxWidth={800}
219
>
220
  // Component manages its own state
221
  // User interactions automatically update position/size
222
</Rnd>
223
```
224

225
### Controlled (Required for state persistence)
226

227
```typescript
228
<Rnd
229
  size={{ width: savedWidth, height: savedHeight }}
230
  position={{ x: savedX, y: savedY }}
231
  onDragStop={(e, d) => savePosition(d.x, d.y)}
232
  onResizeStop={(e, dir, ref, delta, pos) => saveSize(ref.style.width, ref.style.height)}
233
>
234
  // External state management required
235
  // Enables persistence, validation, synchronization
236
</Rnd>
237
```