The latest articles on DEV Community by Andrii Taranenko (@andrii_taranenko_8237af66). https://dev.to/andrii_taranenko_8237af66 https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F4144886%2F96f3f351-d004-4d5c-82db-0e10eb7f7dca.png https://dev.to/andrii_taranenko_8237af66 en Andrii Taranenko Sat, 26 Sep 2026 21:49:17 +0000 https://dev.to/andrii_taranenko_8237af66/extending-react-grid-layout-cross-instance-drag-drop-multi-level-nesting-19gi https://dev.to/andrii_taranenko_8237af66/extending-react-grid-layout-cross-instance-drag-drop-multi-level-nesting-19gi <p>react-grid-layout is great for single-grid drag &amp; drop, but it doesn't support:</p> <ul> <li>Moving items between separate grid instances</li> <li>Nesting grids inside grids with independent layout state</li> </ul> <p>Here's how I extended it to handle both, in a React + TypeScript setup.</p> <h2> The problem </h2> <p>cross-grid multi-level dnd</p> <h2> Approach </h2> <p>Inspected react-grid-layout source core</p> <h2> Result </h2> <div> <iframe src="https://www.youtube.com/embed/Z37FyhuDh88" width="315" height="560"> </iframe> </div> <p>Curious if anyone's tackled this differently - patched the lib, wrapped it, or used dnd-kit instead?</p> javascript react showdev typescript