React Gateway

In order to render modals at the end of the DOM rather than in place there is a concept of “Portals” which render React DOM into a new context.

Most implementations of this (including the one in react-modal) work by using:

ReactDOM.unstable_renderSubtreeIntoContainer(...)

and a little extra magic to update the portal appropriately.

The problem with this (other than using an api still marked “unstable”) is that it does not work in a server-side/universal/isomorphic context because it works by creating an element and appending it to document.body.

Obviously this is not an ideal solution, so I’ve created a new way of doing this that fits within the normal react rendering cycle.

<GatewayProvider>
  <div className="application">
    <div className="application-content">
      <Gateway into="example">
        Hello from Gateway
      </Gateway>
    </div>
    <GatewayDest name="example" className="gateway"/>
  </div>
</GatewayProvider>

Which will render like this:

<div class="application">
  <div class="application-content"></div>
  <div class="gateway">
    Hello from Gateway
  </div>
</div>

It does this by maintaining an internal registry which tracks containers and children and renders them using the normal react component lifecycle. I’ve published this module as react-gateway

I’ve used this to create a React modal library that can be rendered universally: react-modal2 (note this is not a drop-in replacement, it has a different/less-opinionated api).

I think it would be really awesome if react-modal could do the same and use react-gateway too.

[gaearon]

I don’t see why it wouldn’t work. It renders in componentWillReceiveProps which should be enough. Can you please file an issue with RHL and a minimal reproducing case?

[OliverJAsh]

IIUC, SSR of the modal does not work because the modal uses portals. This proposal offers a solution. Is that correct?

I for one would very much like a solution to enable SSR for the modal.

Re. https://github.com/reactjs/react-modal/issues/580#issuecomment-489330313