Skip to content
This repository has been archived by the owner on Dec 11, 2023. It is now read-only.

Portals/Overlays: Portal Render Target #30

Open
tegan-rbi opened this issue Jun 17, 2022 · 1 comment
Open

Portals/Overlays: Portal Render Target #30

tegan-rbi opened this issue Jun 17, 2022 · 1 comment

Comments

@tegan-rbi
Copy link

tegan-rbi commented Jun 17, 2022

Hello!

It would be useful to provide a component that allows consumers of the library to choose where Portals are rendered instead of as a sibling to the children prop of the PortalProvider. It is useful because the way "portals" are being implemented here changes where the component being portalled renders in the React tree. This has implications for Context. Below if we try to render a NativeBaseModal (which uses PortalProvider), ContextProviderA and ContextProviderB are not accessible from within the Modal component since it is ultimately rendered directly under the NativeBaseProvider.

  <NativeBaseProvider> // NativeBaseProvider provides theme context and PortalProvider is consumed by NativeBase
    <ContextProviderA>
      <ContextProviderB>
        <App />
      <ContextProviderB>
    <ContextProviderA>
    // Portals created by ContextProviderA, ContextProviderB, and App are all rendered here! Outside of the context providers!
  </NativeBaseProvider>

I have already created a patch for my own project to add this and can put up a PR if it would be desirable.

Ultimately I just created a PortalRenderer component below:

export function PortalRenderer() {
  const context = usePortalProvider()!;

  return context.items?.map(
    (item) => <React.Fragment key={item.id}>{item.node}</React.Fragment>
  ) ?? null;
}

I also deleted:

{/* Render Overlays */}
{items.map((item) => {
return <React.Fragment key={item.id}>{item.node}</React.Fragment>;
})}
.

This is obviously a breaking change since Portals are no longer automatically rendered and would require users to consume the PortalRenderer component somewhere in order to actually render their portals.

@MelkorNemesis
Copy link

+1 I'm currently facing the same issue. Because of this, I'm not able to access my application's contexts.

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants