react-rnd Documentation

You can install react-rnd using npm or yarn to add resizable and draggable functionality to your React components.

npm i -S react-rnd

yarn add react-rnd

For production applications, it is recommended to enable type-aware lint rules in your ESLint configuration.

1. Update parserOptions to include your tsconfig files:
2. Replace plugin:@typescript-eslint/recommended with plugin:@typescript-eslint/recommended-type-checked or plugin:@typescript-eslint/strict-type-checked.
3. Optionally add plugin:@typescript-eslint/stylistic-type-checked.
4. Install eslint-plugin-react and add plugin:react/recommended and plugin:react/jsx-runtime to the extends list.

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

Use the default prop to set the initial position (x, y) and size (width, height) of the component. This is useful for uncontrolled components where you don't need to manage the state manually.

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

To fully control the component's state, use the position and size props. You must update your state via the onDragStop and onResizeStop (or onResize) callbacks to keep the component in sync with your application state.

<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>

You can programmatically control the Rnd component by accessing its instance via a ref. This allows you to update the component's size or position from outside the component's own internal state updates.

• updateSize({ width, height }): Updates the component size. Accepts numbers (pixels) or strings (e.g., '300px', '50%').
• updatePosition({ x, y }): Updates the component position. Note: When using this method, the grid and bounds props are ignored for that specific update.

class YourComponent extends Component {
  update() {
    // Update size
    this.rnd.updateSize({ width: 200, height: 300 });
    
    // Update position
    this.rnd.updatePosition({ x: 200, y: 300 });
  }

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

The Rnd component provides callbacks to track dragging activity:

• onDragStart: Triggered when dragging begins. Receives the event and a data object containing the node, current x/y coordinates, deltaX/deltaY, and lastX/lastY.
• onDrag: Triggered continuously during dragging. Receives the same parameters as onDragStart.
• onDragStop: Triggered when dragging ends. Receives the same parameters as onDragStart.

Note: Returning false from these handlers can prevent the drag action.

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;

Use the following callbacks to respond to resize events.

• onResizeStart: Triggered when resizing begins. Returning false from this callback will cancel the resize.
• onResize: Triggered during the resize operation. Receives the event, direction, element reference, delta (width/height change), and the new position.
• onResizeStop: Triggered when resizing ends.