Development resources at your finger tips
Build with the coolest Web3 projects
Recurring funding for Open Source
Learn about Web3 & earn rewards
Show appreciation for each other
Meet fellow developers, designers, futurists and more. Collaborate and BUIDL awesome projects together.
Discover great web3 organizations, work on meaningful projects and build relationships with like minded people. Browse Tribes
Meet the top hunters and contributors from our community.
In partnership with Protocol Labs, we’re excited to welcome builders from everywhere to APOLLO, your mission control to engage with the builder…
We’re excited to publically announce that Matic Network is partnering with Gitcoin to launch the Build-n-Earn Program – assisting dApps t…
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.