0
# React RnD
1

2
React RnD is a React component library that provides a unified `Rnd` component for creating draggable and resizable UI elements. It combines functionality from react-draggable and re-resizable libraries into a single, comprehensive component with extensive customization options.
3

4
## Package Information
5

6
- **Package Name**: react-rnd
7
- **Package Type**: npm
8
- **Language**: TypeScript
9
- **Installation**: `npm install react-rnd`
10

11
## Core Imports
12

13
```typescript
14
import { 
15
  Rnd,
16
  Grid,
17
  Position,
18
  DraggableData,
19
  RndDragCallback,
20
  RndDragEvent,
21
  RndResizeStartCallback,
22
  ResizableDelta,
23
  RndResizeCallback,
24
  ResizeEnable,
25
  HandleClasses,
26
  HandleStyles,
27
  HandleComponent,
28
  Props
29
} from "react-rnd";
30
```
31

32
For CommonJS:
33

34
```javascript
35
const { 
36
  Rnd,
37
  Grid,
38
  Position,
39
  DraggableData,
40
  RndDragCallback,
41
  RndDragEvent,
42
  RndResizeStartCallback,
43
  ResizableDelta,
44
  RndResizeCallback,
45
  ResizeEnable,
46
  HandleClasses,
47
  HandleStyles,
48
  HandleComponent,
49
  Props
50
} = require("react-rnd");
51
```
52

53
Most common imports:
54

55
```typescript
56
import { Rnd, Position, DraggableData, ResizableDelta } from "react-rnd";
57
```
58

59
## Basic Usage
60

61
```typescript
62
import React from "react";
63
import { Rnd } from "react-rnd";
64

65
function App() {
66
  return (
67
    <Rnd
68
      default={{
69
        x: 0,
70
        y: 0,
71
        width: 320,
72
        height: 200,
73
      }}
74
      minWidth={200}
75
      minHeight={100}
76
      bounds="window"
77
    >
78
      <div style={{ background: "#f0f0f0", width: "100%", height: "100%" }}>
79
        Draggable and resizable content
80
      </div>
81
    </Rnd>
82
  );
83
}
84
```
85

86
## Architecture
87

88
React RnD is built around several key design patterns:
89

90
- **Unified Component**: Single `Rnd` component that wraps both draggable and resizable functionality
91
- **Prop-Based Configuration**: Extensive props for controlling all aspects of drag and resize behavior
92
- **Event-Driven**: Callback props for all interaction phases (start, during, stop)
93
- **Constraint System**: Comprehensive boundary and grid constraint options
94
- **Instance API**: Programmatic methods for updating size and position externally
95
- **TypeScript Integration**: Full type definitions for all props, callbacks, and return types
96

97
## Capabilities
98

99
### Core Component
100

101
The main Rnd component that provides both draggable and resizable functionality with comprehensive configuration options.
102

103
```typescript { .api }
104
interface Rnd extends React.PureComponent<Props, State> {
105
  /** Programmatically update component size */
106
  updateSize(size: { width: number | string; height: number | string }): void;
107
  /** Programmatically update component position */
108
  updatePosition(position: Position): void;
109
}
110
```
111

112
[Component API](./component-api.md)
113

114
### Size and Position Control
115

116
Configuration for size constraints, positioning, default values, and controlled vs uncontrolled behavior.
117

118
```typescript { .api }
119
interface SizePositionProps {
120
  default?: { x: number; y: number; width?: number | string; height?: number | string };
121
  position?: { x: number; y: number };
122
  size?: { width: string | number; height: string | number };
123
  minWidth?: number | string;
124
  minHeight?: number | string;
125
  maxWidth?: number | string;
126
  maxHeight?: number | string;
127
}
128
```
129

130
[Size and Position](./size-position.md)
131

132
### Drag Configuration
133

134
Configuration for dragging behavior including axis constraints, bounds, grid snapping, and handle specification.
135

136
```typescript { .api }
137
interface DragProps {
138
  disableDragging?: boolean;
139
  dragAxis?: "x" | "y" | "both" | "none";
140
  dragHandleClassName?: string;
141
  dragGrid?: Grid;
142
  bounds?: string | Element;
143
  cancel?: string;
144
  allowAnyClick?: boolean;
145
}
146
```
147

148
[Drag Configuration](./drag-config.md)
149

150
### Resize Configuration
151

152
Configuration for resizing behavior including handle customization, aspect ratio locking, and directional control.
153

154
```typescript { .api }
155
interface ResizeProps {
156
  enableResizing?: ResizeEnable;
157
  resizeGrid?: Grid;
158
  resizeHandleStyles?: HandleStyles;
159
  resizeHandleClasses?: HandleClasses;
160
  resizeHandleComponent?: HandleComponent;
161
  resizeHandleWrapperClass?: string;
162
  resizeHandleWrapperStyle?: React.CSSProperties;
163
  lockAspectRatio?: boolean | number;
164
  lockAspectRatioExtraWidth?: number;
165
  lockAspectRatioExtraHeight?: number;
166
}
167
```
168

169
[Resize Configuration](./resize-config.md)
170

171
### Event Handling
172

173
Callback props for all drag and resize interaction phases with detailed event data.
174

175
```typescript { .api }
176
interface EventProps {
177
  onDragStart?: RndDragCallback;
178
  onDrag?: RndDragCallback;
179
  onDragStop?: RndDragCallback;
180
  onResizeStart?: RndResizeStartCallback;
181
  onResize?: RndResizeCallback;
182
  onResizeStop?: RndResizeCallback;
183
  onMouseDown?: (e: MouseEvent) => void;
184
  onMouseUp?: (e: MouseEvent) => void;
185
}
186
```
187

188
[Event Handling](./event-handling.md)
189

190
## Core Types
191

192
```typescript { .api }
193
type Grid = [number, number];
194

195
interface Position {
196
  x: number;
197
  y: number;
198
}
199

200
interface DraggableData extends Position {
201
  node: HTMLElement;
202
  deltaX: number;
203
  deltaY: number;
204
  lastX: number;
205
  lastY: number;
206
}
207

208
interface ResizableDelta {
209
  width: number;
210
  height: number;
211
}
212

213
type RndDragEvent =
214
  | React.MouseEvent<HTMLElement | SVGElement>
215
  | React.TouchEvent<HTMLElement | SVGElement>
216
  | MouseEvent
217
  | TouchEvent;
218

219
// RndDragCallback is imported from react-draggable as DraggableEventHandler
220
type RndDragCallback = import("react-draggable").DraggableEventHandler;
221

222
type RndResizeStartCallback = (
223
  e: React.MouseEvent<HTMLElement> | React.TouchEvent<HTMLElement>,
224
  dir: ResizeDirection,
225
  elementRef: HTMLElement
226
) => void | boolean;
227

228
type RndResizeCallback = (
229
  e: MouseEvent | TouchEvent,
230
  dir: ResizeDirection,
231
  elementRef: HTMLElement,
232
  delta: ResizableDelta,
233
  position: Position
234
) => void;
235

236
// ResizeDirection is imported from 're-resizable' dependency
237
type ResizeDirection = 
238
  | "top" 
239
  | "right" 
240
  | "bottom" 
241
  | "left" 
242
  | "topRight" 
243
  | "bottomRight" 
244
  | "bottomLeft" 
245
  | "topLeft";
246

247
type ResizeEnable = 
248
  | {
249
      bottom?: boolean;
250
      bottomLeft?: boolean;
251
      bottomRight?: boolean;
252
      left?: boolean;
253
      right?: boolean;
254
      top?: boolean;
255
      topLeft?: boolean;
256
      topRight?: boolean;
257
    }
258
  | boolean;
259

260
interface HandleStyles {
261
  bottom?: React.CSSProperties;
262
  bottomLeft?: React.CSSProperties;
263
  bottomRight?: React.CSSProperties;
264
  left?: React.CSSProperties;
265
  right?: React.CSSProperties;
266
  top?: React.CSSProperties;
267
  topLeft?: React.CSSProperties;
268
  topRight?: React.CSSProperties;
269
}
270

271
interface HandleClasses {
272
  bottom?: string;
273
  bottomLeft?: string;
274
  bottomRight?: string;
275
  left?: string;
276
  right?: string;
277
  top?: string;
278
  topLeft?: string;
279
  topRight?: string;
280
}
281

282
interface HandleComponent {
283
  top?: React.ReactElement<any>;
284
  right?: React.ReactElement<any>;
285
  bottom?: React.ReactElement<any>;
286
  left?: React.ReactElement<any>;
287
  topRight?: React.ReactElement<any>;
288
  bottomRight?: React.ReactElement<any>;
289
  bottomLeft?: React.ReactElement<any>;
290
  topLeft?: React.ReactElement<any>;
291
}
292
```