Extending react-grid-layout: Cross-Instance Drag & Drop + Multi-Level Nesting

Extending react-grid-layout: Cross-Instance Drag & Drop + Multi-Level Nesting

# javascript# react# showdev# typescript
Extending react-grid-layout: Cross-Instance Drag & Drop + Multi-Level NestingAndrii Taranenko

react-grid-layout is great for single-grid drag & drop, but it doesn't support: Moving items...

react-grid-layout is great for single-grid drag & drop, but it doesn't support:

  • Moving items between separate grid instances
  • Nesting grids inside grids with independent layout state

Here's how I extended it to handle both, in a React + TypeScript setup.

The problem

cross-grid multi-level dnd

Approach

Inspected react-grid-layout source core

Result

Curious if anyone's tackled this differently - patched the lib, wrapped it, or used dnd-kit instead?