### Install React RND

Source: https://context7.com/bokuweb/react-rnd/llms.txt

Install react-rnd and its peer dependencies using npm or yarn.

```bash
npm install react-rnd
# or
yarn add react-rnd
```

--------------------------------

### Basic Rnd Component Usage

Source: https://github.com/bokuweb/react-rnd/blob/master/README.md

Example demonstrating the default configuration for the Rnd component, setting initial position and size.

```javascript
<Rnd
  default={{
    x: 0,
    y: 0,
    width: 320,
    height: 200,
  }}>
  Rnd
</Rnd>
```

--------------------------------

### onResizeStart Callback

Source: https://github.com/bokuweb/react-rnd/blob/master/README.md

Callback function invoked when the resizable component starts resizing.

```APIDOC
## onResizeStart

### Description
Calls when resizable component resize start.

### Type
`RndResizeStartCallback`

### Callback Signature
```javascript
export type RndResizeStartCallback = (
  e: SyntheticMouseEvent<HTMLDivElement> | SyntheticTouchEvent<HTMLDivElement>,
  dir: ResizeDirection,
  refToElement: React.ElementRef<'div'>,
) => void;
```
```

--------------------------------

### Install react-rnd with yarn

Source: https://github.com/bokuweb/react-rnd/blob/master/README.md

Use this command to add react-rnd to your project dependencies using yarn.

```sh
yarn add react-rnd
```

--------------------------------

### Install react-rnd with npm

Source: https://github.com/bokuweb/react-rnd/blob/master/README.md

Use this command to add react-rnd to your project dependencies using npm.

```sh
npm i -S react-rnd
```

--------------------------------

### React-RND Resize Callbacks Example

Source: https://context7.com/bokuweb/react-rnd/llms.txt

Demonstrates how to use `onResizeStart`, `onResize`, and `onResizeStop` callbacks to track and react to resize events. These callbacks provide details about the resize direction, delta, and new position.

```tsx
import React, { useState } from "react";
import { Rnd, RndResizeCallback, RndResizeStartCallback, ResizableDelta, Position } from "react-rnd";

export default function ResizeCallbacksExample() {
  const [info, setInfo] = useState({ w: 200, h: 200, x: 0, y: 0 });

  const handleResizeStop: RndResizeCallback = (e, direction, ref, delta, position) => {
    setInfo({
      w: ref.offsetWidth,
      h: ref.offsetHeight,
      x: position.x,
      y: position.y,
    });
    console.log("Resized:", { direction, delta, position });
    // direction: "top" | "right" | "bottom" | "left" | "topLeft" | "topRight" | "bottomLeft" | "bottomRight"
    // delta:    { width: number, height: number }  — how much size changed
    // position: { x: number, y: number }          — updated top-left position
  };

  const handleResizeStart: RndResizeStartCallback = (e, direction, elementRef) => {
    console.log("Resize started:", direction);
  };

  return (
    <>
      <Rnd
        size={{ width: info.w, height: info.h }}
        position={{ x: info.x, y: info.y }}
        onResizeStart={handleResizeStart}
        onResize={(e, direction, ref, delta, position) => {
          console.log("Resizing…", delta);
        }}
        onResizeStop={handleResizeStop}
        onDragStop={(e, d) => setInfo(s => ({ ...s, x: d.x, y: d.y }))}
        style={{ border: "1px solid #ddd", background: "#f0f0f0" }}
      >
        Resize me
      </Rnd>
      <p>w:{info.w} h:{info.h} x:{info.x} y:{info.y}</p>
    </>
  );
}
```

--------------------------------

### React-RND Imperative API Example

Source: https://context7.com/bokuweb/react-rnd/llms.txt

Shows how to use `useRef` to get a reference to the Rnd instance and imperatively call `updateSize()` and `updatePosition()` to change the component's dimensions and location without re-rendering the parent.

```tsx
import React, { useRef } from "react";
import { Rnd } from "react-rnd";

export default function ImperativeAPIExample() {
  const rndRef = useRef<Rnd>(null);

  const resetToDefault = () => {
    rndRef.current?.updateSize({ width: 200, height: 200 });
    rndRef.current?.updatePosition({ x: 0, y: 0 });
  };

  const growPanel = () => {
    rndRef.current?.updateSize({ width: 400, height: 300 });
  };

  return (
    <>
      <Rnd
        ref={rndRef}
        default={{ x: 50, y: 50, width: 200, height: 200 }}
        style={{ border: "1px solid #ddd", background: "#f0f0f0" }}
      >
        Imperative panel
      </Rnd>
      <button onClick={resetToDefault}>Reset</button>
      <button onClick={growPanel}>Grow to 400×300</button>
    </>
  );
}
```

--------------------------------

### onDragStart Callback

Source: https://github.com/bokuweb/react-rnd/blob/master/README.md

Callback function invoked when the dragging of the component starts.

```APIDOC
## onDragStart

### Description
Callback called on dragging start.

### Type
`DraggableEventHandler`

### Callback Signature
```javascript
type DraggableData = {
  node: HTMLElement,
  x: number,
  y: number,
  deltaX: number, deltaY: number,
  lastX: number, lastY: number
};

type DraggableEventHandler = (
  e: SyntheticMouseEvent | SyntheticTouchEvent, data: DraggableData,
) => void | false;
```
```

--------------------------------

### Rnd Component with Controlled Size and Position (onResize)

Source: https://github.com/bokuweb/react-rnd/blob/master/README.md

This example demonstrates controlling the Rnd component's size and position using state, with updates captured during the resize event.

```javascript
<Rnd
  size={{ width: this.state.width,  height: this.state.height }}
  position={{ x: this.state.x, y: this.state.y }}
  onDragStop={(e, d) => { this.setState({ x: d.x, y: d.y }) }}
  onResize={(e, direction, ref, delta, position) => {
    this.setState({
      width: ref.offsetWidth,
      height: ref.offsetHeight,
      ...position,
    });
  }}>
  001
</Rnd>
```

--------------------------------

### Update Component Size Example

Source: https://github.com/bokuweb/react-rnd/blob/master/README.md

Demonstrates how to update the size of the Rnd component programmatically using the `updateSize` instance method. Accepts dimensions as numbers, strings, or percentages.

```javascript
class YourComponent extends Component {

  ...

  update() {
    this.rnd.updateSize({ width: 200, height: 300 });
  }

  render() {
    return (
      <Rnd ref={c => { this.rnd = c; }} ...rest >
        example
      </Rnd>
    );
  }
  ...
}
```

--------------------------------

### Define RndResizeStartCallback Type

Source: https://github.com/bokuweb/react-rnd/blob/master/README.md

Defines the callback function signature for when a resize operation starts. It includes event, direction, and element reference.

```typescript
export type RndResizeStartCallback = (
  e: SyntheticMouseEvent<HTMLDivElement> | SyntheticTouchEvent<HTMLDivElement>,
  dir: ResizeDirection,
  refToElement: React.ElementRef<'div'>,
) => void;
```

--------------------------------

### Rnd Component with Controlled Position and Size

Source: https://github.com/bokuweb/react-rnd/blob/master/README.md

Example showing how to control the size and position of the Rnd component using state. Updates position on drag stop and size/position on resize.

```javascript
<Rnd
  size={{ width: this.state.width,  height: this.state.height }}
  position={{ x: this.state.x, y: this.state.y }}
  onDragStop={(e, d) => { this.setState({ x: d.x, y: d.y }) }}
  onResizeStop={(e, direction, ref, delta, position) => {
    this.setState({
      width: ref.style.width,
      height: ref.style.height,
      ...position,
    });
  }}>
  001
</Rnd>
```

--------------------------------

### Update Component Position Example

Source: https://github.com/bokuweb/react-rnd/blob/master/README.md

Shows how to update the position of the Rnd component using the `updatePosition` instance method. `grid` and `bounds` props are ignored when this method is called.

```javascript
class YourComponent extends Component {

  ...

  update() {
    this.rnd.updatePosition({ x: 200, y: 300 });
  }

  render() {
    return (
      <Rnd ref={c => { this.rnd = c; }} ...rest >
        example
      </Rnd>
    );
  }

  ...
}
```

--------------------------------

### React-RND Click Options Example

Source: https://context7.com/bokuweb/react-rnd/llms.txt

Configures `allowAnyClick` to enable dragging with non-left mouse buttons and `enableUserSelectHack={false}` to prevent the library from suppressing text selection during drag operations.

```tsx
import { Rnd } from "react-rnd";

export default function ClickOptionsExample() {
  return (
    <Rnd
      default={{ x: 0, y: 0, width: 200, height: 120 }}
      allowAnyClick            // drag with any mouse button
      enableUserSelectHack={false}  // don't suppress text selection during drag
      style={{ border: "1px solid #ddd", background: "#f0f0f0" }}
    >
      Right-click draggable
    </Rnd>
  );
}
```

--------------------------------

### Constrain Drag Direction with `dragAxis` in react-rnd

Source: https://context7.com/bokuweb/react-rnd/llms.txt

The `dragAxis` prop restricts movement to a single axis. Valid values are 'x', 'y', 'both' (default), or 'none'. This example restricts dragging to the horizontal axis.

```tsx
import React, { useState } from "react";
import { Rnd } from "react-rnd";

export default function AxisConstraintExample() {
  const [state, setState] = useState({ x: 0, y: 0, width: 100, height: 100 });

  return (
    <Rnd
      size={{ width: state.width, height: state.height }}
      position={{ x: state.x, y: state.y }}
      dragAxis="x"   // only horizontal dragging allowed
      onDragStop={(e, d) => setState(s => ({ ...s, x: d.x, y: d.y }))}
      onResizeStop={(e, dir, ref, delta, position) =>
        setState({
          width: Number(ref.style.width),
          height: Number(ref.style.height),
          ...position,
        })
      }
      style={{ border: "1px solid #ddd", background: "#f0f0f0" }}
    >
      Horizontal only
    </Rnd>
  );
}
```

--------------------------------

### Run Tests

Source: https://github.com/bokuweb/react-rnd/blob/master/README.md

Execute the project's test suite using npm.

```sh
npm t
```

--------------------------------

### Resize Callbacks

Source: https://context7.com/bokuweb/react-rnd/llms.txt

This section details the callbacks available for handling resize events: `onResizeStart`, `onResize`, and `onResizeStop`. These callbacks provide information about the resize direction, the change in size (`delta`), and the updated position of the element.

```APIDOC
## Resize Callbacks: `onResizeStart`, `onResize`, `onResizeStop`

Resize callbacks receive the event, the resize direction string, a reference to the DOM element, a `delta` object (`{ width, height }` representing how much the size changed), and the updated `position` (because resizing from top/left edges adjusts position).

### Parameters for `onResizeStop` and `onResize`:
- **e** (Event): The browser event object.
- **direction** (string): The direction of the resize (e.g., "top", "right", "bottom", "left", "topLeft", "topRight", "bottomLeft", "bottomRight").
- **ref** (HTMLElement): A reference to the DOM element being resized.
- **delta** ({ width: number, height: number }): An object indicating how much the width and height have changed.
- **position** ({ x: number, y: number }): The updated top-left position of the element.

### Parameters for `onResizeStart`:
- **e** (Event): The browser event object.
- **direction** (string): The initial direction of the resize.
- **elementRef** (HTMLElement): A reference to the DOM element.

### Example Usage:
```tsx
import React, { useState } from "react";
import { Rnd, RndResizeCallback, RndResizeStartCallback, ResizableDelta, Position } from "react-rnd";

export default function ResizeCallbacksExample() {
  const [info, setInfo] = useState({ w: 200, h: 200, x: 0, y: 0 });

  const handleResizeStop: RndResizeCallback = (e, direction, ref, delta, position) => {
    setInfo({
      w: ref.offsetWidth,
      h: ref.offsetHeight,
      x: position.x,
      y: position.y,
    });
    console.log("Resized:", { direction, delta, position });
  };

  const handleResizeStart: RndResizeStartCallback = (e, direction, elementRef) => {
    console.log("Resize started:", direction);
  };

  return (
    <>
      <Rnd
        size={{ width: info.w, height: info.h }}
        position={{ x: info.x, y: info.y }}
        onResizeStart={handleResizeStart}
        onResize={(e, direction, ref, delta, position) => {
          console.log("Resizing…", delta);
        }}
        onResizeStop={handleResizeStop}
        onDragStop={(e, d) => setInfo(s => ({ ...s, x: d.x, y: d.y }))}
        style={{ border: "1px solid #ddd", background: "#f0f0f0" }}
      >
        Resize me
      </Rnd>
      <p>w:{info.w} h:{info.h} x:{info.x} y:{info.y}</p>
    </>
  );
}
```
```

--------------------------------

### Snap-to-Grid with dragGrid and resizeGrid

Source: https://context7.com/bokuweb/react-rnd/llms.txt

Utilize `dragGrid` and `resizeGrid` props, each accepting a `[x, y]` tuple, to snap movement and resizing to a specified pixel increment.

```tsx
import { Rnd } from "react-rnd";

export default function GridSnapExample() {
  return (
    <Rnd
      default={{ x: 0, y: 0, width: 200, height: 200 }}
      dragGrid={[20, 20]}    // snap drag to 20px grid
      resizeGrid={[20, 20]}  // snap resize to 20px grid
      style={{ border: "1px solid #ddd", background: "#f0f0f0" }}
    >
      Snap grid: 20 × 20
    </Rnd>
  );
}
```

--------------------------------

### Instance API: `updateSize()` and `updatePosition()`

Source: https://context7.com/bokuweb/react-rnd/llms.txt

This section covers the imperative API methods `updateSize()` and `updatePosition()` which allow you to programmatically change the size and position of the `Rnd` component instance. These methods are useful for controlled updates without triggering a full re-render cycle.

```APIDOC
## Instance API: `updateSize()` and `updatePosition()`

Obtain a ref to the `Rnd` instance to imperatively update its size or position without triggering a controlled-component re-render cycle. Note that `bounds` is ignored when `updatePosition` is called.

### Methods:
- **`updateSize(size: { width: number, height: number })`**: Updates the size of the `Rnd` component.
- **`updatePosition(position: { x: number, y: number })`**: Updates the position of the `Rnd` component.

### Example Usage:
```tsx
import React, { useRef } from "react";
import { Rnd } from "react-rnd";

export default function ImperativeAPIExample() {
  const rndRef = useRef<Rnd>(null);

  const resetToDefault = () => {
    rndRef.current?.updateSize({ width: 200, height: 200 });
    rndRef.current?.updatePosition({ x: 0, y: 0 });
  };

  const growPanel = () => {
    rndRef.current?.updateSize({ width: 400, height: 300 });
  };

  return (
    <>
      <Rnd
        ref={rndRef}
        default={{ x: 50, y: 50, width: 200, height: 200 }}
        style={{ border: "1px solid #ddd", background: "#f0f0f0" }}
      >
        Imperative panel
      </Rnd>
      <button onClick={resetToDefault}>Reset</button>
      <button onClick={growPanel}>Grow to 400×300</button>
    </>
  );
}
```
```

--------------------------------

### Handle Drag Events with Callbacks

Source: https://context7.com/bokuweb/react-rnd/llms.txt

Utilize `onDragStart`, `onDrag`, and `onDragStop` callbacks to monitor and react to the drag lifecycle. Each callback receives event data including current position and deltas.

```tsx
import React, { useState } from "react";
import { Rnd, DraggableData, RndDragEvent } from "react-rnd";

export default function DragCallbacksExample() {
  const [log, setLog] = useState<string[]>([]);

  const addLog = (msg: string)
    =>
    setLog(prev => [...prev.slice(-4), msg]);

  return (
    <>
      <Rnd
        default={{ x: 0, y: 0, width: 200, height: 100 }}
        onDragStart={(e: RndDragEvent, data: DraggableData) => {
          addLog(`dragStart  x:${data.x}  y:${data.y}`);
        }}
        onDrag={(e: RndDragEvent, data: DraggableData) => {
          addLog(`drag  x:${data.x}  y:${data.y}  Δx:${data.deltaX}`);
        }}
        onDragStop={(e: RndDragEvent, data: DraggableData) => {
          addLog(`dragStop  x:${data.x}  y:${data.y}`);
        }}
        style={{ border: "1px solid #ddd", background: "#f0f0f0" }}
      >
        Drag me
      </Rnd>
      <ul>{log.map((l, i) => <li key={i}>{l}</li>)}</ul>
    </>
  );
}
// DraggableData shape:
// { node: HTMLElement, x: number, y: number, deltaX: number, deltaY: number, lastX: number, lastY: number }
```

--------------------------------

### Props: resizeGrid

Source: https://github.com/bokuweb/react-rnd/blob/master/README.md

The `resizeGrid` prop specifies the grid increments to which resizing should snap.

```APIDOC
## Props: resizeGrid

### Description
Specifies the increments that resizing should snap to.

### Type
`[number, number]`

### Default
`[1, 1]`
```

--------------------------------

### Click Options: `allowAnyClick` and `enableUserSelectHack`

Source: https://context7.com/bokuweb/react-rnd/llms.txt

This section explains the `allowAnyClick` and `enableUserSelectHack` props. `allowAnyClick` allows dragging with non-left mouse buttons, while `enableUserSelectHack` controls whether text selection is suppressed during drag operations.

```APIDOC
## `allowAnyClick` and `enableUserSelectHack`

`allowAnyClick` enables dragging with non-left mouse buttons (e.g. middle or right click). `enableUserSelectHack` (default `true`) adds `user-select: none` to `document.body` during drag to prevent text selection; set it to `false` if this causes side effects in your app.

### Props:
- **`allowAnyClick`** (boolean): If true, allows dragging with any mouse button.
- **`enableUserSelectHack`** (boolean): If true (default), suppresses text selection during drag by applying `user-select: none` to the body. Set to `false` to disable this behavior.

### Example Usage:
```tsx
import { Rnd } from "react-rnd";

export default function ClickOptionsExample() {
  return (
    <Rnd
      default={{ x: 0, y: 0, width: 200, height: 120 }}
      allowAnyClick            // drag with any mouse button
      enableUserSelectHack={false}  // don't suppress text selection during drag
      style={{ border: "1px solid #ddd", background: "#f0f0f0" }}
    >
      Right-click draggable
    </Rnd>
  );
}
```
```

--------------------------------

### onResize Callback

Source: https://github.com/bokuweb/react-rnd/blob/master/README.md

Callback function invoked continuously while the resizable component is being resized.

```APIDOC
## onResize

### Description
Calls when resizable component resizing.

### Type
`RndResizeCallback`

### Callback Signature
```javascript
export type RndResizeCallback = (
  e: MouseEvent | TouchEvent,
  dir: ResizeDirection,
  refToElement: React.ElementRef<'div'>,
  delta: ResizableDelta,
  position: Position,
) => void;
```
```

--------------------------------

### updateSize Instance API

Source: https://github.com/bokuweb/react-rnd/blob/master/README.md

Imperatively updates the component's size. Accepts string or number for dimensions, including percentages.

```APIDOC
## updateSize

### Description
Update component size. For example, you can set `300`, `'300px'`, `50%`.

### Parameters
- **size** (`{ width: string | number, height: string | number }`) - Required - The new dimensions for the component.

### Example
```js
class YourComponent extends Component {
  ...
  update() {
    this.rnd.updateSize({ width: 200, height: 300 });
  }

  render() {
    return (
      <Rnd ref={c => { this.rnd = c; }} ...rest >
        example
      </Rnd>
    );
  }
  ...
}
```
```

--------------------------------

### Instance API: updateSize

Source: https://github.com/bokuweb/react-rnd/blob/master/README.md

The `updateSize` method allows you to programmatically update the size of the Rnd component. It accepts an object with `width` and `height` properties.

```APIDOC
## Instance API: updateSize

### Description
Updates the size of the component.

### Method Signature
`updateSize(size: { width: number | string, height: number | string }): void`

### Parameters
- **size** (object) - Required - An object containing `width` and `height` properties.
  - **width** (number | string) - The new width of the component.
  - **height** (number | string) - The new height of the component.
```

--------------------------------

### onResizeStop Callback

Source: https://github.com/bokuweb/react-rnd/blob/master/README.md

Callback function invoked when the resizable component finishes resizing.

```APIDOC
## onResizeStop

### Description
Calls when resizable component resize stop.

### Type
`RndResizeCallback`

### Callback Signature
```javascript
export type RndResizeCallback = (
  e: MouseEvent | TouchEvent,
  dir: ResizeDirection,
  refToElement: React.ElementRef<'div'>,
  delta: ResizableDelta,
  position: Position,
) => void;
```
```

--------------------------------

### Configuration Properties

Source: https://github.com/bokuweb/react-rnd/blob/master/README.md

These properties allow customization of the drag and resize behavior of the react-rnd component.

```APIDOC
## `dragGrid?: [number, number];`

### Description
The `dragGrid` property is used to specify the increments that moving should snap to. Defaults to `[1, 1]`.
```

```APIDOC
## `lockAspectRatio?: boolean | number;`

### Description
The `lockAspectRatio` property is used to lock aspect ratio.
Set to `true` to lock the aspect ratio based on the initial size.
Set to a numeric value to lock a specific aspect ratio (such as `16/9`).
If set to numeric, make sure to set initial height/width to values with correct aspect ratio.
If omitted, set `false`.
```

```APIDOC
## `lockAspectRatioExtraWidth?: number;`

### Description
The `lockAspectRatioExtraWidth` property enables a resizable component to maintain an aspect ratio plus extra width.
For instance, a video could be displayed 16:9 with a 50px side bar.
If omitted, set `0`.
```

```APIDOC
## `scale?: number;`

### Description
Specifies the scale of the canvas you are dragging or resizing this element on. This allows
you to, for example, get the correct drag / resize deltas while you are zoomed in or out via
a transform or matrix in the parent of this element.
If omitted, set `1`.
```

```APIDOC
## `lockAspectRatioExtraHeight?: number;`

### Description
The `lockAspectRatioExtraHeight` property enables a resizable component to maintain an aspect ratio plus extra height.
For instance, a video could be displayed 16:9 with a 50px header bar.
If omitted, set `0`.
```

```APIDOC
## `dragHandleClassName?: string;`

### Description
Specifies a selector to be used as the handle that initiates drag.
Example: `handle`.
```

```APIDOC
## `resizeHandleStyles?: HandleStyles;`

### Description
The `resizeHandleStyles` property is used to override the style of one or more resize handles.
Only the axis you specify will have its handle style replaced.
If you specify a value for `right` it will completely replace the styles for the `right` resize handle,
but other handle will still use the default styles.

```javascript
export type HandleStyles = {
  bottom?: React.CSSProperties,
  bottomLeft?: React.CSSProperties,
  bottomRight?: React.CSSProperties,
  left?: React.CSSProperties,
  right?: React.CSSProperties,
  top?: React.CSSProperties,
  topLeft?: React.CSSProperties,
  topRight?: React.CSSProperties
}
```
```

```APIDOC
## `resizeHandleClasses?: HandleClasses;`

### Description
The `resizeHandleClasses` property is used to set the className of one or more resize handles.

```javascript
type HandleClasses = {
  bottom?: string;
  bottomLeft?: string;
  bottomRight?: string;
  left?: string;
  right?: string;
  top?: string;
  topLeft?: string;
  topRight?: string;
}
```
```

```APIDOC
## `resizeHandleComponent?`: HandleCompoent;

### Description
The `resizeHandleComponent` allows you to pass a custom React component as the resize handle.

```javascript
type HandleComponent = {
  top?: React.ReactElement<any>;
  right?: React.ReactElement<any>;
  bottom?: React.ReactElement<any>;
  left?: React.ReactElement<any>;
  topRight?: React.ReactElement<any>;
  bottomRight?: React.ReactElement<any>;
  bottomLeft?: React.ReactElement<any>;
  topLeft?: React.ReactElement<any>;
}
```
```

```APIDOC
## `resizeHandleWrapperClass?: string;`

### Description
The `resizeHandleWrapperClass` property is used to set css class name of resize handle wrapper(`span`) element.
```

```APIDOC
## `resizeHandleWrapperStyle?: Style;

### Description
The `resizeHandleWrapperStyle` property is used to set css class name of resize handle wrapper(`span`) element.
```

```APIDOC
## `enableResizing?: ?Enable;

### Description
The `enableResizing` property is used to set the resizable permission of the component.

The permission of `top`, `right`, `bottom`, `left`, `topRight`, `bottomRight`, `bottomLeft`, `topLeft` direction resizing.
If omitted, all resizer are enabled.
If you want to permit only right direction resizing, set `{ top:false, right:true, bottom:false, left:false, topRight:false, bottomRight:false, bottomLeft:false, topLeft:false }`.

```javascript
export type Enable = {
  bottom?: boolean;
  bottomLeft?: boolean;
  bottomRight?: boolean;
  left?: boolean;
  right?: boolean;
  top?: boolean;
  topLeft?: boolean;
  topRight?: boolean;
} | boolean
```
```

```APIDOC
## `disableDragging?: boolean;

### Description
The `disableDragging` property disables dragging completely.
```

```APIDOC
## `cancel?: string;

### Description
The `cancel` property disables specifies a selector to be used to prevent drag initialization (e.g. `.body`).
```

```APIDOC
## `dragAxis?: 'x' | 'y' | 'both' | 'none'

### Description
The direction of allowed movement (dragging) allowed ('x','y','both','none').
```

```APIDOC
## `bounds?: string; | Element

### Description
Specifies movement boundaries. Accepted values:
 - `parent` restricts movement within the node's offsetParent
    (nearest node with position relative or absolute)
 - `window`, `body`, Selector like `.fooClassName` or
 - `Element`.
```

```APIDOC
## `enableUserSelectHack?: boolean;

### Description
By default, we add 'user-select:none' attributes to the document body    
to prevent ugly text selection during drag. If this is causing problems    
for your app, set this to `false`.
```

--------------------------------

### Configure ESLint for Type-Aware Linting

Source: https://github.com/bokuweb/react-rnd/blob/master/examples/vite/README.md

Update the ESLint configuration to enable type-aware lint rules for production applications. Ensure `tsconfig.json` files are correctly referenced.

```javascript
export default {
  // other rules...
  parserOptions: {
    ecmaVersion: 'latest',
    sourceType: 'module',
    project: ['./tsconfig.json', './tsconfig.node.json', './tsconfig.app.json'],
    tsconfigRootDir: __dirname,
  },
}
```

--------------------------------

### Handle Drag and Resize on Scaled Canvases

Source: https://context7.com/bokuweb/react-rnd/llms.txt

When the parent container is scaled using CSS `transform`, ensure correct drag and resize calculations by passing the same scale factor to the `scale` prop. This synchronizes delta computations.

```tsx
import { Rnd } from "react-rnd";

export default function ScaledCanvasExample() {
  const SCALE = 0.5;

  return (
    <div style={{ transform: `scale(${SCALE})`, transformOrigin: "0 0", width: "800px", height: "600px" }}>
      <Rnd
        scale={SCALE}        // must match parent CSS scale
        bounds="parent"
        default={{ x: 0, y: 0, width: 200, height: 200 }}
        style={{ border: "1px solid #ddd", background: "#f0f0f0" }}
      >
        Correct drag/resize on scaled canvas
      </Rnd>
    </div>
  );
}
```

--------------------------------

### Replace Resize Handles with Custom Components

Source: https://context7.com/bokuweb/react-rnd/llms.txt

Substitute default resize handles with custom React elements by providing a component to the `resizeHandleComponent` prop. This offers maximum flexibility in handle design.

```tsx
import { Rnd } from "react-rnd";

const ArrowIcon = () => (
  <svg width="16" height="16" viewBox="0 0 16 16" fill="#555">
    <path d="M11 11L5 11L11 5z" />
  </svg>
);

const CustomHandle = () => (
  <div
    style={{
      width: "100%",
      height: "100%",
      background: "#fff",
      border: "1px solid #aaa",
      borderRadius: "3px",
      display: "flex",
      alignItems: "center",
      justifyContent: "center",
    }}
  >
    <ArrowIcon />
  </div>
);

export default function CustomHandleExample() {
  return (
    <Rnd
      default={{ x: 0, y: 0, width: 200, height: 200 }}
      resizeHandleComponent={{ bottomRight: <CustomHandle /> }}
      style={{ border: "1px solid #ddd", background: "#f0f0f0" }}
    >
      Custom resize handle (bottom-right)
    </Rnd>
  );
}
```

--------------------------------

### Enable/Disable Resizing Directions

Source: https://github.com/bokuweb/react-rnd/blob/master/README.md

The Enable type controls which directions a component can be resized from. Set specific directions to true or false, or set the entire type to boolean to enable/disable all resizing.

```typescript
export type Enable = {
  bottom?: boolean;
  bottomLeft?: boolean;
  bottomRight?: boolean;
  left?: boolean;
  right?: boolean;
  top?: boolean;
  topLeft?: boolean;
  topRight?: boolean;
} | boolean
```

--------------------------------

### Props: style

Source: https://github.com/bokuweb/react-rnd/blob/master/README.md

The `style` prop allows you to apply custom inline styles to the Rnd component.

```APIDOC
## Props: style

### Description
Applies custom inline styles to the component.

### Type
`{ [key: string]: string }`
```

--------------------------------

### Instance API: updatePosition

Source: https://github.com/bokuweb/react-rnd/blob/master/README.md

The `updatePosition` method allows you to programmatically update the position of the Rnd component. It accepts an object with `x` and `y` properties.

```APIDOC
## Instance API: updatePosition

### Description
Updates the position of the component.

### Method Signature
`updatePosition({ x: number, y: number }): void`

### Parameters
- **position** (object) - Required - An object containing `x` and `y` properties.
  - **x** (number) - The new x-coordinate of the component.
  - **y** (number) - The new y-coordinate of the component.
```

--------------------------------

### Selectively Enable Resize Handles with `enableResizing`

Source: https://context7.com/bokuweb/react-rnd/llms.txt

Control which resize handles are active by passing an object to `enableResizing`. Keys map to directions (e.g., `top`, `right`), and boolean values enable/disable them. A single boolean disables/enables all handles.

```tsx
import { Rnd } from "react-rnd";

export default function SelectiveResizeExample() {
  return (
    <Rnd
      default={{ x: 0, y: 0, width: 200, height: 200 }}
      enableResizing={{
        top: false,
        right: true,
        bottom: true,
        left: false,
        topRight: false,
        bottomRight: true,
        bottomLeft: false,
        topLeft: false,
      }}
      style={{ border: "1px solid #ddd", background: "#f0f0f0" }}
    >
      Right / bottom resize only
    </Rnd>
  );
}

// Disable all resizing:
// <Rnd enableResizing={false} ... />
```

--------------------------------

### Props: minWidth

Source: https://github.com/bokuweb/react-rnd/blob/master/README.md

The `minWidth` prop sets the minimum allowable width for the Rnd component during resizing.

```APIDOC
## Props: minWidth

### Description
Sets the minimum width of the component.

### Type
`number | string`

### Details
- Examples: `300`, `'300px'`, `'50%'`.
```

--------------------------------

### Lock Aspect Ratio with react-rnd

Source: https://context7.com/bokuweb/react-rnd/llms.txt

Use `lockAspectRatio={true}` to maintain the initial aspect ratio during resizing. Pass a numeric ratio (e.g., `16/9`) for a specific ratio. `lockAspectRatioExtraWidth` and `lockAspectRatioExtraHeight` can adjust for fixed elements.

```tsx
import { Rnd } from "react-rnd";

export default function AspectRatioExample() {
  return (
    // Lock to initial aspect ratio (200 / 160 ≈ 1.25)
    <Rnd
      default={{ x: 0, y: 0, width: 200, height: 160 }}
      lockAspectRatio          // preserves 200:160 ratio
      bounds="parent"
      style={{ border: "1px solid #ddd", background: "#f0f0f0" }}
    >
      Aspect-locked
    </Rnd>
  );
}

// Numeric ratio example: 16:9 video with a 50px sidebar
export function VideoWithSidebar() {
  return (
    <Rnd
      default={{ x: 0, y: 0, width: 320, height: 180 }}
      lockAspectRatio={16 / 9}
      lockAspectRatioExtraWidth={50}   // 50px sidebar excluded from ratio
    >
      16:9 video
    </Rnd>
  );
}
```

--------------------------------

### Props: size

Source: https://github.com/bokuweb/react-rnd/blob/master/README.md

The `size` prop allows you to control the component's dimensions programmatically. Use this prop when you need to manage the size state externally.

```APIDOC
## Props: size

### Description
Controls the size of the component programmatically.

### Type
`{ width: (number | string), height: (number | string) }`

### Details
- Use this prop if you need to control the size state yourself.
- Examples for `width` and `height`: `300`, `'300px'`, `'50%'`.
```

--------------------------------

### Constraining Movement and Resizing with bounds

Source: https://context7.com/bokuweb/react-rnd/llms.txt

Use the `bounds` prop to restrict drag and resize operations. Accepted values include CSS selectors, 'parent', 'window', 'body', or an HTMLElement reference.

```tsx
import React, { useState } from "react";
import { Rnd } from "react-rnd";

const containerStyle = {
  position: "relative" as const,
  background: "#eee",
  width: "600px",
  height: "400px",
};

const boxStyle = {
  display: "flex",
  alignItems: "center",
  justifyContent: "center",
  border: "solid 1px #ddd",
  background: "#f0f0f0",
};

export default function BoundsExample() {
  const [pos, setPos] = useState({ x: 0, y: 0 });
  const [size, setSize] = useState({ width: 200, height: 200 });

  return (
    <div style={containerStyle}>
      <Rnd
        style={boxStyle}
        bounds="parent"   // constrain within the nearest positioned ancestor
        size={size}
        position={pos}
        onDragStop={(e, d) => setPos({ x: d.x, y: d.y })}
        onResize={(e, direction, ref, delta, position) => {
          setSize({ width: ref.offsetWidth, height: ref.offsetHeight });
          setPos(position);
        }}
      >
        Bounded box
      </Rnd>
    </div>
  );
}
// Also valid: bounds="window" | bounds="body" | bounds=".mySelector" | bounds={elementRef}
```

--------------------------------

### Define Custom Resize Handle Component

Source: https://github.com/bokuweb/react-rnd/blob/master/README.md

Use HandleComponent to provide custom React components for resize handles. This offers maximum flexibility in designing the appearance and behavior of handles.

```typescript
type HandleComponent = {
  top?: React.ReactElement<any>;
  right?: React.ReactElement<any>;
  bottom?: React.ReactElement<any>;
  left?: React.ReactElement<any>;
  topRight?: React.ReactElement<any>;
  bottomRight?: React.ReactElement<any>;
  bottomLeft?: React.ReactElement<any>;
  topLeft?: React.ReactElement<any>;
}
```

--------------------------------

### updatePosition Instance API

Source: https://github.com/bokuweb/react-rnd/blob/master/README.md

Imperatively updates the component's position. Ignores `grid` and `bounds` props when called.

```APIDOC
## updatePosition

### Description
Update component position. `grid` `bounds` props is ignored, when this method called.

### Parameters
- **position** (`{ x: number, y: number }`) - Required - The new coordinates for the component.

### Example
```js
class YourComponent extends Component {
  ...
  update() {
    this.rnd.updatePosition({ x: 200, y: 300 });
  }

  render() {
    return (
      <Rnd ref={c => { this.rnd = c; }} ...rest >
        example
      </Rnd>
    );
  }
  ...
}
```
```

--------------------------------

### Props: default

Source: https://github.com/bokuweb/react-rnd/blob/master/README.md

The `default` prop sets the initial position and size of the Rnd component when it is first rendered.

```APIDOC
## Props: default

### Description
Sets the default position and size of the component.

### Type
`{ x: number; y: number; width?: number | string; height?: number | string; }`

### Details
- `width` and `height`: Used to set the default size. Can be numbers (e.g., `300`), strings with units (e.g., `'300px'`), or percentages (e.g., `'50%'`). Defaults to `'auto'` if omitted.
- `x` and `y`: Used to set the default position.
```

--------------------------------

### Uncontrolled Usage with default

Source: https://context7.com/bokuweb/react-rnd/llms.txt

Use the `default` prop to pass initial position and size for uncontrolled usage. The component manages its own state internally.

```tsx
import { Rnd } from "react-rnd";

const style = {
  display: "flex",
  alignItems: "center",
  justifyContent: "center",
  border: "solid 1px #ddd",
  background: "#f0f0f0",
};

export default function UncontrolledExample() {
  return (
    <Rnd
      style={style}
      default={{
        x: 0,
        y: 0,
        width: 320,
        height: 200,
      }}
    >
      Drag or resize me
    </Rnd>
  );
}
```

--------------------------------

### Props: minHeight

Source: https://github.com/bokuweb/react-rnd/blob/master/README.md

The `minHeight` prop sets the minimum allowable height for the Rnd component during resizing.

```APIDOC
## Props: minHeight

### Description
Sets the minimum height of the component.

### Type
`number | string`

### Details
- Examples: `300`, `'300px'`, `'50%'`.
```

--------------------------------

### Constrain Resizable Element Sizes

Source: https://context7.com/bokuweb/react-rnd/llms.txt

Enforce size limitations for resizable elements using `minWidth`, `minHeight`, `maxWidth`, and `maxHeight` props. These can accept pixel values, percentage strings, or numeric values.

```tsx
import { Rnd } from "react-rnd";

export default function SizeConstraintsExample() {
  return (
    <Rnd
      default={{ x: 0, y: 0, width: 200, height: 200 }}
      minWidth={100}
      minHeight={80}
      maxWidth="50%"     // percentage of parent
      maxHeight={400}
      style={{ border: "1px solid #ddd", background: "#f0f0f0" }}
    >
      Constrained resize (100–50% wide, 80–400px tall)
    </Rnd>
  );
}
```

--------------------------------

### Controlled Usage with size and position

Source: https://context7.com/bokuweb/react-rnd/llms.txt

For full external control, pass `size` and `position` props along with `onDragStop` and `onResizeStop` callbacks. This is necessary when the parent component needs to read or reset the state programmatically.

```tsx
import { useState } from "react";
import { Rnd } from "react-rnd";

const style = {
  display: "flex",
  alignItems: "center",
  justifyContent: "center",
  border: "solid 1px #ddd",
  background: "#f0f0f0",
};

export default function ControlledExample() {
  const [size, setSize] = useState({ width: 200, height: 200 });
  const [position, setPosition] = useState({ x: 0, y: 0 });

  return (
    <Rnd
      style={style}
      size={size}
      position={position}
      onDragStop={(e, d) => {
        setPosition({ x: d.x, y: d.y });
      }}
      onResizeStop={(e, direction, ref, delta, newPosition) => {
        setSize({
          width: Number(ref.style.width),
          height: Number(ref.style.height),
        });
        setPosition(newPosition);
      }}
    >
      Controlled Rnd
    </Rnd>
  );
}
```

--------------------------------

### Define Resize Handle Classes

Source: https://github.com/bokuweb/react-rnd/blob/master/README.md

Use HandleClasses to set custom CSS class names for specific resize handles. This allows for more complex styling through CSS.

```typescript
type HandleClasses = {
  bottom?: string;
  bottomLeft?: string;
  bottomRight?: string;
  left?: string;
  right?: string;
  top?: string;
  topLeft?: string;
  topRight?: string;
}
```

--------------------------------

### Props: position

Source: https://github.com/bokuweb/react-rnd/blob/master/README.md

The `position` prop allows you to control the component's position programmatically. Use this prop when you need to manage the position state externally.

```APIDOC
## Props: position

### Description
Controls the position of the component programmatically.

### Type
`{ x: number, y: number }`

### Details
- Use this prop if you need to control the position state yourself.
```

--------------------------------

### Override Resize Handle Styles and Classes

Source: https://context7.com/bokuweb/react-rnd/llms.txt

Customize the appearance of individual resize handles using direction-keyed objects for styles or class names. This allows for unique styling of specific handles.

```tsx
import { Rnd } from "react-rnd";

export default function StyledHandlesExample() {
  return (
    <Rnd
      default={{ x: 0, y: 0, width: 200, height: 200 }}
      resizeHandleStyles={{
        bottomRight: { background: "#0077ff", borderRadius: "50%", width: "12px", height: "12px" },
        bottomLeft:  { background: "#ff4444", borderRadius: "50%", width: "12px", height: "12px" },
      }}
      resizeHandleClasses={{
        top: "my-top-handle",
        right: "my-right-handle",
      }}
      style={{ border: "1px solid #ddd", background: "#f0f0f0" }}
    >
      Custom handle styles
    </Rnd>
  );
}
```

--------------------------------

### allowAnyClick Property

Source: https://github.com/bokuweb/react-rnd/blob/master/README.md

Enables dragging functionality for non-left mouse button clicks when set to true.

```APIDOC
## allowAnyClick

### Description
If set to `true`, will allow dragging on non left-button clicks.

### Type
`boolean`
```

--------------------------------

### Props: maxWidth

Source: https://github.com/bokuweb/react-rnd/blob/master/README.md

The `maxWidth` prop sets the maximum allowable width for the Rnd component during resizing.

```APIDOC
## Props: maxWidth

### Description
Sets the maximum width of the component.

### Type
`number | string`

### Details
- Examples: `300`, `'300px'`, `'50%'`.
```

--------------------------------

### Define Resize Handle Styles

Source: https://github.com/bokuweb/react-rnd/blob/master/README.md

Use HandleStyles to override the default styles of specific resize handles. Specifying a style for an axis replaces all default styles for that handle.

```typescript
export type HandleStyles = {
  bottom?: React.CSSProperties,
  bottomLeft?: React.CSSProperties,
  bottomRight?: React.CSSProperties,
  left?: React.CSSProperties,
  right?: React.CSSProperties,
  top?: React.CSSProperties,
  topLeft?: React.CSSProperties,
  topRight?: React.CSSProperties
}
```

--------------------------------

### Define RndResizeCallback Type

Source: https://github.com/bokuweb/react-rnd/blob/master/README.md

Defines the callback function signature for ongoing resize operations. It provides event, direction, element reference, delta, and position.

```typescript
export type RndResizeCallback = (
  e: MouseEvent | TouchEvent,
  dir: ResizeDirection,
  refToElement: React.ElementRef<'div'>,
  delta: ResizableDelta,
  position: Position,
) => void;
```

--------------------------------

### onDrag Callback

Source: https://github.com/bokuweb/react-rnd/blob/master/README.md

Callback function invoked continuously while the component is being dragged.

```APIDOC
## onDrag

### Description
`onDrag` called with the following parameters:

### Type
`DraggableEventHandler`

### Callback Signature
```javascript
type DraggableData = {
  node: HTMLElement,
  x: number,
  y: number,
  deltaX: number, deltaY: number,
  lastX: number, lastY: number
};

type DraggableEventHandler = (
  e: SyntheticMouseEvent | SyntheticTouchEvent, data: DraggableData,
) => void | false;
```
```