Workers Auto Approve
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](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.
Setup your profile
Tell us a little about you:
No results found for
Type to search skills..
Required [[totalcharacter]] / 240
Are you currently looking for work?
[[ option.string ]]
Setup your profile
Our tools are based on the principles of earn (💰), learn (📖), and meet (💬).
Select the ones you are interested in. You can change it later in your settings.
I'm also an organization manager looking for a great community.
Enable your organization profile
Gitcoin products can help grow community around your brand. Create your tribe, events, and incentivize your community with bounties. Announce new and upcoming events using townsquare. Find top-quality hackers and fund them to work with you on a grant.
These are the organizations you own. If you don't see your organization here please be sure that information is public on your GitHub profile. Gitcoin will sync this information for you.
Select the products you are interested in:
Out of the box you will receive Tribes Lite for your organization. Please provide us with a contact email: