Gitcoin is GDPR complaint. Learn more in
Gitcoin's Terms & Conditions.
Check out the Issue Explorer
Looking to fund some work? You can submit a new Funded Issue here.
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](http://tether.io/), 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.