Expose createPortal in react-reconciler

[rricard]

Do you want to request a feature or report a bug?

Feature

What is the current behavior?

createPortal is only available in the shared private package with the REACT_PORTAL_TYPE symbol also in the same shared package

That means that any renderer wishing to allow portals needs to be in the React codebase.

If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem. Your bug will get fixed much faster if we can run your code and it doesn't have dependencies other than React. Paste the link to your JSFiddle (https://jsfiddle.net/Luktwrdm/) or CodeSandbox (https://codesandbox.io/s/new) example below:

N/A

What is the expected behavior?

The possibility of creating portals for custom renderers should be exposed to renderer developers by making it available in react-reconciler.

Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?

• react 16.4.0
• react-reconciler 0.11.0
• Chrome on Windows
• Non-public Reconciler
• Never worked in any React version

I can write the corresponding patch if the maintainers are ok with the change.

[gaearon]

It would be more appropriate to expose it on react itself (not the renderers) just like createElement. But we haven't decided on a "final" API for portals because we wanted to make it work for some other use cases too (e.g. "universal" client/server or cross-renderer portals). So that kind of stalled.

I think if you want to use portals in custom renderers today, feel free to just copy paste something like

const hasSymbol = typeof Symbol === 'function' && Symbol.for;

const REACT_PORTAL_TYPE = hasSymbol
  ? Symbol.for('react.portal')
  : 0xeaca;

export function createPortal(
  children,
  containerInfo,
  implementation,
  key= null,
): ReactPortal {
  return {
    $$typeof: REACT_PORTAL_TYPE,
    key: key == null ? null : '' + key,
    children,
    containerInfo,
    implementation,
  };
}

It's unlikely we'll change either the constant or the object shape in the near future.

[rricard]

If this is going to be stable until you figure out the final API that is fine by me. Thank you!

[jquense]

You can also simplify by importing the symbol from react-is as well

[rricard]

I'd rather do that. Thanks!

[rricard]

That worked perfectly, thanks!

I have to thank you by the way, it's been a long time since I've been able to properly use React and things have clearly evolved in the right direction. Moreover, writing a renderer is not a daunting task either. I managed to get a fully featured React 16.4 in a matter of weeks in a completely different environment than the DOM. Continue the awesome work!

[gaearon]

Neat. Wanna share some details? I love learning about unusual React targets.

[rricard]

Gotta make sure I can first but we can eventually discuss that on Reactiflux or twitter DMs at some point.