0
# Resize Configuration
1

2
Configuration options for resizing behavior including handle customization, directional control, aspect ratio locking, and grid snapping.
3

4
## Capabilities
5

6
### Resize Enable Control
7

8
Control which resize handles are available and enabled.
9

10
```typescript { .api }
11
/**
12
 * Control which resize handles are enabled
13
 * Can be boolean (enable/disable all) or object for granular control
14
 */
15
enableResizing?: ResizeEnable;
16

17
type ResizeEnable = 
18
  | boolean
19
  | {
20
      bottom?: boolean;
21
      bottomLeft?: boolean;
22
      bottomRight?: boolean;
23
      left?: boolean;
24
      right?: boolean;
25
      top?: boolean;
26
      topLeft?: boolean;
27
      topRight?: boolean;
28
    };
29
```
30

31
**Usage Examples:**
32

33
```typescript
34
// Disable all resizing
35
<Rnd
36
  default={{ x: 0, y: 0, width: 200, height: 150 }}
37
  enableResizing={false}
38
>
39
  Only draggable, not resizable
40
</Rnd>
41

42
// Enable only horizontal resizing
43
<Rnd
44
  default={{ x: 0, y: 0, width: 200, height: 150 }}
45
  enableResizing={{
46
    top: false,
47
    right: true,
48
    bottom: false,
49
    left: true,
50
    topRight: false,
51
    bottomRight: false,
52
    bottomLeft: false,
53
    topLeft: false,
54
  }}
55
>
56
  Horizontal resize only
57
</Rnd>
58

59
// Enable only corner handles
60
<Rnd
61
  default={{ x: 0, y: 0, width: 200, height: 150 }}
62
  enableResizing={{
63
    top: false,
64
    right: false,
65
    bottom: false,
66
    left: false,
67
    topRight: true,
68
    bottomRight: true,
69
    bottomLeft: true,
70
    topLeft: true,
71
  }}
72
>
73
  Corner resize handles only
74
</Rnd>
75
```
76

77
### Resize Grid Snapping
78

79
Snap resizing operations to a grid for consistent sizing.
80

81
```typescript { .api }
82
/**
83
 * Snap resizing to grid increments
84
 * Array of [width_increment, height_increment] in pixels
85
 * Default: [1, 1] (no visible snapping)
86
 */
87
resizeGrid?: Grid; // [number, number]
88
```
89

90
**Usage Examples:**
91

92
```typescript
93
// Snap to 10px resize grid
94
<Rnd
95
  default={{ x: 0, y: 0, width: 200, height: 150 }}
96
  resizeGrid={[10, 10]}
97
>
98
  Resizes in 10px increments
99
</Rnd>
100

101
// Different width and height snapping
102
<Rnd
103
  default={{ x: 0, y: 0, width: 200, height: 150 }}
104
  resizeGrid={[25, 15]}
105
>
106
  25px width, 15px height increments
107
</Rnd>
108
```
109

110
### Resize Handle Styling
111

112
Customize the appearance of resize handles with CSS.
113

114
```typescript { .api }
115
/**
116
 * Custom CSS styles for resize handles
117
 * Object mapping resize directions to React.CSSProperties
118
 */
119
resizeHandleStyles?: HandleStyles;
120

121
interface HandleStyles {
122
  bottom?: React.CSSProperties;
123
  bottomLeft?: React.CSSProperties;
124
  bottomRight?: React.CSSProperties;
125
  left?: React.CSSProperties;
126
  right?: React.CSSProperties;
127
  top?: React.CSSProperties;
128
  topLeft?: React.CSSProperties;
129
  topRight?: React.CSSProperties;
130
}
131

132
/**
133
 * Custom CSS class names for resize handles
134
 * Object mapping resize directions to CSS class names
135
 */
136
resizeHandleClasses?: HandleClasses;
137

138
interface HandleClasses {
139
  bottom?: string;
140
  bottomLeft?: string;
141
  bottomRight?: string;
142
  left?: string;
143
  right?: string;
144
  top?: string;
145
  topLeft?: string;
146
  topRight?: string;
147
}
148
```
149

150
**Usage Examples:**
151

152
```typescript
153
// Custom handle styles
154
<Rnd
155
  default={{ x: 0, y: 0, width: 200, height: 150 }}
156
  resizeHandleStyles={{
157
    bottomRight: {
158
      background: '#ff0000',
159
      width: '20px',
160
      height: '20px',
161
      borderRadius: '50%',
162
    },
163
    right: {
164
      background: '#00ff00',
165
      width: '10px',
166
    }
167
  }}
168
>
169
  Custom styled resize handles
170
</Rnd>
171

172
// Custom handle classes
173
<Rnd
174
  default={{ x: 0, y: 0, width: 200, height: 150 }}
175
  resizeHandleClasses={{
176
    bottomRight: 'custom-corner-handle',
177
    right: 'custom-side-handle',
178
    bottom: 'custom-side-handle',
179
  }}
180
>
181
  Custom CSS classes on handles
182
</Rnd>
183
```
184

185
### Resize Handle Components
186

187
Replace default resize handles with custom React components.
188

189
```typescript { .api }
190
/**
191
 * Custom React components for resize handles
192
 * Object mapping resize directions to React elements
193
 */
194
resizeHandleComponent?: HandleComponent;
195

196
interface HandleComponent {
197
  top?: React.ReactElement<any>;
198
  right?: React.ReactElement<any>;
199
  bottom?: React.ReactElement<any>;
200
  left?: React.ReactElement<any>;
201
  topRight?: React.ReactElement<any>;
202
  bottomRight?: React.ReactElement<any>;
203
  bottomLeft?: React.ReactElement<any>;
204
  topLeft?: React.ReactElement<any>;
205
}
206
```
207

208
**Usage Examples:**
209

210
```typescript
211
// Custom corner handle component
212
<Rnd
213
  default={{ x: 0, y: 0, width: 200, height: 150 }}
214
  resizeHandleComponent={{
215
    bottomRight: <div style={{ 
216
      width: '20px', 
217
      height: '20px', 
218
      background: 'blue',
219
      borderRadius: '50%',
220
      border: '2px solid white'
221
    }} />,
222
    topLeft: <div>↖</div>
223
  }}
224
>
225
  Custom resize handle components
226
</Rnd>
227

228
// Icon-based handles
229
<Rnd
230
  default={{ x: 0, y: 0, width: 200, height: 150 }}
231
  resizeHandleComponent={{
232
    right: <span>↔</span>,
233
    bottom: <span>↕</span>,
234
    bottomRight: <span>↗</span>
235
  }}
236
>
237
  Icon resize handles
238
</Rnd>
239
```
240

241
### Resize Handle Wrapper
242

243
Customize the wrapper elements around resize handles.
244

245
```typescript { .api }
246
/**
247
 * CSS class name for resize handle wrapper elements
248
 * Applied to the span element that wraps each resize handle
249
 */
250
resizeHandleWrapperClass?: string;
251

252
/**
253
 * CSS styles for resize handle wrapper elements
254
 * Applied to the span element that wraps each resize handle
255
 */
256
resizeHandleWrapperStyle?: React.CSSProperties;
257
```
258

259
### Aspect Ratio Locking
260

261
Lock aspect ratio during resize operations.
262

263
```typescript { .api }
264
/**
265
 * Lock aspect ratio during resize
266
 * - true: Lock to initial aspect ratio
267
 * - number: Lock to specific aspect ratio (width/height)
268
 * - false/undefined: No aspect ratio locking
269
 */
270
lockAspectRatio?: boolean | number;
271

272
/**
273
 * Extra width to add to aspect ratio calculations
274
 * Useful for maintaining aspect ratio plus fixed margins/borders
275
 */
276
lockAspectRatioExtraWidth?: number;
277

278
/**
279
 * Extra height to add to aspect ratio calculations
280
 * Useful for maintaining aspect ratio plus fixed headers/footers
281
 */
282
lockAspectRatioExtraHeight?: number;
283
```
284

285
**Usage Examples:**
286

287
```typescript
288
// Lock to initial aspect ratio
289
<Rnd
290
  default={{ x: 0, y: 0, width: 400, height: 300 }}
291
  lockAspectRatio={true}
292
>
293
  Maintains 4:3 aspect ratio during resize
294
</Rnd>
295

296
// Lock to specific aspect ratio (16:9)
297
<Rnd
298
  default={{ x: 0, y: 0, width: 320, height: 180 }}
299
  lockAspectRatio={16/9}
300
>
301
  Always maintains 16:9 aspect ratio
302
</Rnd>
303

304
// Aspect ratio with extra space for header
305
<Rnd
306
  default={{ x: 0, y: 0, width: 320, height: 220 }}
307
  lockAspectRatio={16/9}
308
  lockAspectRatioExtraHeight={40}
309
>
310
  <div>
311
    <div style={{ height: '40px', background: '#ccc' }}>Header (40px)</div>
312
    <div style={{ flex: 1 }}>16:9 content area</div>
313
  </div>
314
</Rnd>
315

316
// Aspect ratio with sidebar
317
<Rnd
318
  default={{ x: 0, y: 0, width: 370, height: 180 }}
319
  lockAspectRatio={16/9}
320
  lockAspectRatioExtraWidth={50}
321
>
322
  <div style={{ display: 'flex' }}>
323
    <div style={{ width: '50px', background: '#ccc' }}>Sidebar</div>
324
    <div style={{ flex: 1 }}>16:9 content area</div>
325
  </div>
326
</Rnd>
327
```
328

329
## Advanced Resize Configuration
330

331
### Scale Support
332

333
Handle resizing in scaled/transformed contexts.
334

335
```typescript { .api }
336
/**
337
 * Scale factor for resize calculations
338
 * Use when component is inside scaled/transformed containers
339
 * Default: 1 (no scaling)
340
 */
341
scale?: number;
342
```
343

344
**Usage Examples:**
345

346
```typescript
347
// Resizing in scaled container
348
<div style={{ transform: 'scale(1.5)' }}>
349
  <Rnd
350
    default={{ x: 0, y: 0, width: 200, height: 150 }}
351
    scale={1.5}
352
  >
353
    Correct resize behavior in scaled container
354
  </Rnd>
355
</div>
356
```
357

358
## Resize Direction Types
359

360
```typescript { .api }
361
type ResizeDirection = 
362
  | "top" 
363
  | "right" 
364
  | "bottom" 
365
  | "left" 
366
  | "topRight" 
367
  | "bottomRight" 
368
  | "bottomLeft" 
369
  | "topLeft";
370
```
371

372
Each direction corresponds to:
373
- **top/bottom/left/right**: Side handles for single-axis resizing
374
- **topLeft/topRight/bottomLeft/bottomRight**: Corner handles for two-axis resizing