tessl/npm-react-rnd

React component for creating draggable and resizable UI elements with comprehensive interaction controls

—

Pending

Overview

Eval results

Files

Size and Position Control

Name: tessl/npm-react-rnd
Author: tessl

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

Capabilities

Default Size and Position

Set initial size and position for uncontrolled usage.

/**
 * Default size and position for uncontrolled component
 * Sets initial values that can be changed by user interaction
 */
default?: {
  /** Initial x coordinate in pixels */
  x: number;
  /** Initial y coordinate in pixels */
  y: number;
  /** Initial width - number (pixels), string with units, or undefined for 'auto' */
  width?: number | string;
  /** Initial height - number (pixels), string with units, or undefined for 'auto' */
  height?: number | string;
};

Usage Examples:

// Default positioning with automatic size
<Rnd
  default={{
    x: 100,
    y: 50,
    // width and height omitted = 'auto'
  }}
>
  Content will be sized automatically
</Rnd>

// Default positioning with specific size
<Rnd
  default={{
    x: 0,
    y: 0,
    width: 320,
    height: 200,
  }}
>
  Fixed size content
</Rnd>

// Default with string dimensions
<Rnd
  default={{
    x: 0,
    y: 0,
    width: "50%",
    height: "300px",
  }}
>
  Percentage and pixel dimensions
</Rnd>

Controlled Position

Control position externally for fully controlled component behavior.

/**
 * Controlled position - component position is managed externally
 * Use with onDrag/onDragStop callbacks to update position state
 */
position?: {
  /** X coordinate in pixels */
  x: number;
  /** Y coordinate in pixels */
  y: number;
};

Controlled Size

Control size externally for fully controlled component behavior.

/**
 * Controlled size - component size is managed externally
 * Use with onResize/onResizeStop callbacks to update size state
 */
size?: {
  /** Width - number (pixels) or string with units */
  width: string | number;
  /** Height - number (pixels) or string with units */
  height: string | number;
};

Usage Examples:

// Fully controlled component
function ControlledRnd() {
  const [state, setState] = React.useState({
    x: 0,
    y: 0,
    width: 320,
    height: 200,
  });

  return (
    <Rnd
      size={{ width: state.width, height: state.height }}
      position={{ x: state.x, y: state.y }}
      onDragStop={(e, d) => {
        setState(prev => ({ ...prev, x: d.x, y: d.y }));
      }}
      onResizeStop={(e, direction, ref, delta, position) => {
        setState({
          width: ref.style.width,
          height: ref.style.height,
          ...position,
        });
      }}
    >
      Controlled content
    </Rnd>
  );
}

Size Constraints

Set minimum and maximum size constraints.

/**
 * Minimum width constraint
 * Can be number (pixels), string with units ('300px'), or percentage ('50%')
 */
minWidth?: number | string;

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

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

/**
 * Maximum height constraint
 * Can be number (pixels), string with units ('600px'), or percentage ('80%')
 */
maxHeight?: number | string;

Usage Examples:

// Numeric constraints (pixels)
<Rnd
  default={{ x: 0, y: 0, width: 320, height: 200 }}
  minWidth={200}
  minHeight={100}
  maxWidth={800}
  maxHeight={600}
>
  Size constrained content
</Rnd>

// String constraints with units
<Rnd
  default={{ x: 0, y: 0, width: "40%", height: "300px" }}
  minWidth="200px"
  minHeight="100px"
  maxWidth="80%"
  maxHeight="500px"
>
  Mixed unit constraints
</Rnd>

// Percentage constraints
<Rnd
  default={{ x: 0, y: 0, width: "50%", height: "40%" }}
  minWidth="20%"
  minHeight="10%"
  maxWidth="90%"
  maxHeight="80%"
>
  Percentage constrained content
</Rnd>

Constraint Resolution

When constraints are specified:

Pixel values: Used directly as pixel constraints
Percentage values: Calculated relative to parent container size
String with 'px': Parsed to numeric pixel values
Bounds interaction: Size constraints work with boundary constraints
Aspect ratio interaction: Size constraints are applied after aspect ratio calculations

Controlled vs Uncontrolled Patterns

Uncontrolled (Recommended for simple cases)

<Rnd
  default={{ x: 0, y: 0, width: 320, height: 200 }}
  minWidth={200}
  maxWidth={800}
>
  // Component manages its own state
  // User interactions automatically update position/size
</Rnd>

Controlled (Required for state persistence)

<Rnd
  size={{ width: savedWidth, height: savedHeight }}
  position={{ x: savedX, y: savedY }}
  onDragStop={(e, d) => savePosition(d.x, d.y)}
  onResizeStop={(e, dir, ref, delta, pos) => saveSize(ref.style.width, ref.style.height)}
>
  // External state management required
  // Enables persistence, validation, synchronization
</Rnd>

Install with Tessl CLI