CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-react-rnd

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

—

Pending
Overview
Eval results
Files

resize-config.mddocs/

Resize Configuration

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

Capabilities

Resize Enable Control

Control which resize handles are available and enabled.

/**
 * Control which resize handles are enabled
 * Can be boolean (enable/disable all) or object for granular control
 */
enableResizing?: ResizeEnable;

type ResizeEnable = 
  | boolean
  | {
      bottom?: boolean;
      bottomLeft?: boolean;
      bottomRight?: boolean;
      left?: boolean;
      right?: boolean;
      top?: boolean;
      topLeft?: boolean;
      topRight?: boolean;
    };

Usage Examples:

// Disable all resizing
<Rnd
  default={{ x: 0, y: 0, width: 200, height: 150 }}
  enableResizing={false}
>
  Only draggable, not resizable
</Rnd>

// Enable only horizontal resizing
<Rnd
  default={{ x: 0, y: 0, width: 200, height: 150 }}
  enableResizing={{
    top: false,
    right: true,
    bottom: false,
    left: true,
    topRight: false,
    bottomRight: false,
    bottomLeft: false,
    topLeft: false,
  }}
>
  Horizontal resize only
</Rnd>

// Enable only corner handles
<Rnd
  default={{ x: 0, y: 0, width: 200, height: 150 }}
  enableResizing={{
    top: false,
    right: false,
    bottom: false,
    left: false,
    topRight: true,
    bottomRight: true,
    bottomLeft: true,
    topLeft: true,
  }}
>
  Corner resize handles only
</Rnd>

Resize Grid Snapping

Snap resizing operations to a grid for consistent sizing.

/**
 * Snap resizing to grid increments
 * Array of [width_increment, height_increment] in pixels
 * Default: [1, 1] (no visible snapping)
 */
resizeGrid?: Grid; // [number, number]

Usage Examples:

// Snap to 10px resize grid
<Rnd
  default={{ x: 0, y: 0, width: 200, height: 150 }}
  resizeGrid={[10, 10]}
>
  Resizes in 10px increments
</Rnd>

// Different width and height snapping
<Rnd
  default={{ x: 0, y: 0, width: 200, height: 150 }}
  resizeGrid={[25, 15]}
>
  25px width, 15px height increments
</Rnd>

Resize Handle Styling

Customize the appearance of resize handles with CSS.

/**
 * Custom CSS styles for resize handles
 * Object mapping resize directions to React.CSSProperties
 */
resizeHandleStyles?: HandleStyles;

interface 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;
}

/**
 * Custom CSS class names for resize handles
 * Object mapping resize directions to CSS class names
 */
resizeHandleClasses?: HandleClasses;

interface HandleClasses {
  bottom?: string;
  bottomLeft?: string;
  bottomRight?: string;
  left?: string;
  right?: string;
  top?: string;
  topLeft?: string;
  topRight?: string;
}

Usage Examples:

// Custom handle styles
<Rnd
  default={{ x: 0, y: 0, width: 200, height: 150 }}
  resizeHandleStyles={{
    bottomRight: {
      background: '#ff0000',
      width: '20px',
      height: '20px',
      borderRadius: '50%',
    },
    right: {
      background: '#00ff00',
      width: '10px',
    }
  }}
>
  Custom styled resize handles
</Rnd>

// Custom handle classes
<Rnd
  default={{ x: 0, y: 0, width: 200, height: 150 }}
  resizeHandleClasses={{
    bottomRight: 'custom-corner-handle',
    right: 'custom-side-handle',
    bottom: 'custom-side-handle',
  }}
>
  Custom CSS classes on handles
</Rnd>

Resize Handle Components

Replace default resize handles with custom React components.

/**
 * Custom React components for resize handles
 * Object mapping resize directions to React elements
 */
resizeHandleComponent?: HandleComponent;

interface 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>;
}

Usage Examples:

// Custom corner handle component
<Rnd
  default={{ x: 0, y: 0, width: 200, height: 150 }}
  resizeHandleComponent={{
    bottomRight: <div style={{ 
      width: '20px', 
      height: '20px', 
      background: 'blue',
      borderRadius: '50%',
      border: '2px solid white'
    }} />,
    topLeft: <div>↖</div>
  }}
>
  Custom resize handle components
</Rnd>

// Icon-based handles
<Rnd
  default={{ x: 0, y: 0, width: 200, height: 150 }}
  resizeHandleComponent={{
    right: <span>↔</span>,
    bottom: <span>↕</span>,
    bottomRight: <span>↗</span>
  }}
>
  Icon resize handles
</Rnd>

Resize Handle Wrapper

Customize the wrapper elements around resize handles.

/**
 * CSS class name for resize handle wrapper elements
 * Applied to the span element that wraps each resize handle
 */
resizeHandleWrapperClass?: string;

/**
 * CSS styles for resize handle wrapper elements
 * Applied to the span element that wraps each resize handle
 */
resizeHandleWrapperStyle?: React.CSSProperties;

Aspect Ratio Locking

Lock aspect ratio during resize operations.

/**
 * Lock aspect ratio during resize
 * - true: Lock to initial aspect ratio
 * - number: Lock to specific aspect ratio (width/height)
 * - false/undefined: No aspect ratio locking
 */
lockAspectRatio?: boolean | number;

/**
 * Extra width to add to aspect ratio calculations
 * Useful for maintaining aspect ratio plus fixed margins/borders
 */
lockAspectRatioExtraWidth?: number;

/**
 * Extra height to add to aspect ratio calculations
 * Useful for maintaining aspect ratio plus fixed headers/footers
 */
lockAspectRatioExtraHeight?: number;

Usage Examples:

// Lock to initial aspect ratio
<Rnd
  default={{ x: 0, y: 0, width: 400, height: 300 }}
  lockAspectRatio={true}
>
  Maintains 4:3 aspect ratio during resize
</Rnd>

// Lock to specific aspect ratio (16:9)
<Rnd
  default={{ x: 0, y: 0, width: 320, height: 180 }}
  lockAspectRatio={16/9}
>
  Always maintains 16:9 aspect ratio
</Rnd>

// Aspect ratio with extra space for header
<Rnd
  default={{ x: 0, y: 0, width: 320, height: 220 }}
  lockAspectRatio={16/9}
  lockAspectRatioExtraHeight={40}
>
  <div>
    <div style={{ height: '40px', background: '#ccc' }}>Header (40px)</div>
    <div style={{ flex: 1 }}>16:9 content area</div>
  </div>
</Rnd>

// Aspect ratio with sidebar
<Rnd
  default={{ x: 0, y: 0, width: 370, height: 180 }}
  lockAspectRatio={16/9}
  lockAspectRatioExtraWidth={50}
>
  <div style={{ display: 'flex' }}>
    <div style={{ width: '50px', background: '#ccc' }}>Sidebar</div>
    <div style={{ flex: 1 }}>16:9 content area</div>
  </div>
</Rnd>

Advanced Resize Configuration

Scale Support

Handle resizing in scaled/transformed contexts.

/**
 * Scale factor for resize calculations
 * Use when component is inside scaled/transformed containers
 * Default: 1 (no scaling)
 */
scale?: number;

Usage Examples:

// Resizing in scaled container
<div style={{ transform: 'scale(1.5)' }}>
  <Rnd
    default={{ x: 0, y: 0, width: 200, height: 150 }}
    scale={1.5}
  >
    Correct resize behavior in scaled container
  </Rnd>
</div>

Resize Direction Types

type ResizeDirection = 
  | "top" 
  | "right" 
  | "bottom" 
  | "left" 
  | "topRight" 
  | "bottomRight" 
  | "bottomLeft" 
  | "topLeft";

Each direction corresponds to:

  • top/bottom/left/right: Side handles for single-axis resizing
  • topLeft/topRight/bottomLeft/bottomRight: Corner handles for two-axis resizing

Install with Tessl CLI

npx tessl i tessl/npm-react-rnd

docs

component-api.md

drag-config.md

event-handling.md

index.md

resize-config.md

size-position.md

tile.json