Is it possible to add a custom droppable area inside a nested component? Or nest Layout instances?

[Darksoulsong]

I have a specific use case for flexlayout-react, where I need to group a few components inside a "Container" component.

Our app already uses flexlayout-react as the main layout manager, and we can add new components through a dropdown and drag and drop it to the Layout area; So, I tried to create this "Container" component that uses a new Layout instance so that I can drop new components inside it, but that didn't work - probably because the parent/main Layout instance intercepts the drop event, making impossible to drop anything inside "Container". Another option would simply create a droppable area inside "Container", but I didn't find anything in the docs to help me accomplish that.

Is this doable?

Here's a rough wireframe of what I'm looking to accomplish:

[nealus]

the optional prop onTabDrag may be what you are looking for, see the New Features layout in the demo app and its Tab Storage tab

[Darksoulsong]

Great, this is indeed what I needed. Thanks for your help!