Feature: Higher-level wormhole pattern

I’ve been thinking about code that needs to render React nodes somewhere other than as a direct DOM child of a React component. With examples such as:

• A user of Tether, a library which sometimes needs to relocate the DOM node for positioning to work right.
• A React Popover/Dropdown/Dialog component that planning to render its children as a decedent of body so it can position things correctly. (as a bonus this means a popover component can be passed directly to the button that controls it).
• A React component that uses a 3rd party modal dialog library and renders its React children in the body created by that component.
• This could also be slightly related to the need some people have to keep a DOM node around even when it’s not being rendered. (Assuming the implementation is able to React render into a detached node).

The current pattern for these kind of use cases is for the component to React.render its children in a different DOM node and then React.unmountComponentAtNode when the component unmounts. Which as I understand it, is called the “wormhole” pattern.

However this pattern is problematic. With this method context is not passed to the children the way it should be. And while we ‘could’ add a way for a component to access the internal context it’s not supposed to see (the properties it hasn’t declared) and allow React.render to accept that. That would expose internals in ways it shouldn’t be exposed. And in the case that there is any other thing internal to react that should be passed on would not help.

So we need a higher level api to declare faux/virtual/relocated “children” (pick a name) which render into a separate DOM component somewhere else in the dom but are still linked to another component (most components will simply pass this into the api).

• The component is responsible for creating the DOM container and telling ReactDOM where it is.
• This would be integrated into React(DOM) so context and any other piece of data would flow as it normally does.
• The component would be responsible for cleaning up the container. I’m unsure if React should be responsible for unmounting children from the faux/virtual/relocated location or if that would be another function.

[darkdarkdragon]

Issue Status: 1. Open 2. Started 3. Submitted 4. Done

---

This issue now has a funding of 0.01 ETH (6.92 USD @ $692.1/ETH) attached to it.

• If you would like to work on this issue you can ‘start work’ on the Gitcoin Issue Details page.
• Questions? Checkout Gitcoin Help or the Gitcoin Slack
• $0 more funded OSS Work available on the Gitcoin Issue Explorer

[zpao]

renderSubtreeIntoContainer also hasn’t been shipped to a stable release so we haven’t mentioned in the docs yet.