React-Grid-Layout v2.1.0

This release adds powerful new features for large-scale layouts and custom constraints, along with several bug fixes.

✨ New Features

Pluggable Layout Constraints System

A new constraints system allows custom validation and transformation of layout items during drag and resize operations. Build aspect ratio locks, snap-to-grid, boundary restrictions, and more. #2190

import { 
  createConstraintEnforcer, 
  aspectRatioConstraint, 
  positionConstraint,
  sizeConstraint 
} from "react-grid-layout/core";

const enforcer = createConstraintEnforcer([
  aspectRatioConstraint(16 / 9),        // Lock to 16:9 ratio
  positionConstraint({ minX: 0, maxX: 10 }),  // Restrict X position
  sizeConstraint({ minW: 2, maxH: 4 })  // Limit dimensions
]);

<GridLayout constraintEnforcer={enforcer} />

Fast Compactors for Large Layouts

New O(n log n) compactors in react-grid-layout/extras dramatically improve performance for dashboards with 200+ widgets:

| Items | Standard | Fast | Speedup | |-------|----------|------|---------| | 50 | 112 µs | 19 µs | 6x | | 200 | 821 µs | 51 µs | 16x | | 500 | 5.7 ms | 129 µs | 45x |

import { fastVerticalCompactor, fastHorizontalCompactor } from "react-grid-layout/extras";

<GridLayout compactor={fastVerticalCompactor} />

• fastVerticalCompactor - #2184
• fastHorizontalCompactor - #2189, #2193

Wrap Compactor

New wrapCompactor for paragraph-style layouts where items flow left-to-right and wrap to the next row, similar to CSS flexbox. #2186

import { wrapCompactor } from "react-grid-layout/extras";

<GridLayout compactor={wrapCompactor} />

Improved Examples

• Added navigable sidebar to examples for easier exploration
• New grid matrix panel for visualizing layout state in real-time
• #2197

🐛 Bug Fixes

• WidthProvider: Fixed measureBeforeMount not re-observing element after switching from placeholder - #2198
• Drop positioning: Dropped items now center on cursor position instead of top-left corner - #2196
• Margin calculation: Fixed inconsistent margins between grid items - #2195
• Compaction: Fixed incorrect layouts when static items are present by disabling early break optimization - #2194
• Responsive layouts: Fixed infinite layout oscillation in toolbox pattern - #2192
• CSS: Removed user-select: none from grid items to restore text selection and auto-scroll behavior - #2188

🧪 Tests

• Added maxRows enforcement tests for calcXY and calcWH - #2185

🔧 Internal

• Improved changelog action for better automated release notes - #2199

Full Changelog: https://github.com/react-grid-layout/react-grid-layout/compare/2.0.0...2.1.0