Hide portal if host not mounted

[wcastand]

Is there a way to not render the Portal if the host is not mounted instead of mounting it in the View.

Context

In the app we have a formSheet dev panel, and i want to add a portal to be able to add custom panel from a View. but the dev panel is not always mounted (using expo router formSheet). So currently what happens is that if it's not mounted yet, it will be rendered inside the view which doesn't make sense.
I'd like to be able to define my custom panel in the View their are used without having them mounted if the dev panel is not shown or mounted yet.

ideally we can also clear the portal host from the custom view before adding a new one and have a default view in the portalHost when no portal is added yet like no custom panel here

[kirillzyusko]

Hey @wcastand

It makes what you are saying, like if we "teleport" a view to a host (that doesn't exist) then we should remove a view. But at the same time I think some people may want to keep a view where it's rendered (maybe the content is sensitive to mounting/unmounting cycle, i. e. video, and there is a delay in rendering and they wouldn't like to loose content state, i. e. to have unmount stage).

For example I made this fix: #36 When order of rendering affects whether portal will be teleported or not. But! What you are saying also totally makes sense and in certain cases you indeed may not want to render a component if host is not defined 🤷‍♂️

I can add a boolean prop to usePortal hook, something like this:

const { isHostAvailable } = usePortal();

So that then you could create your own wrapper inside your codebase:

const CustomTeleport = ({children, ...rest}) => {
  const { isHostAvailable } = usePortal(rest.hostName);
  
  return isHostAvailable ? (
    <Portal {...rest}>
      {children}
    </Portal>  
  ) : null;
}

In this case we can extend teleport functionality and apply composition pattern to achieve the effect that you want. Would it make sense to add this functionality?

[wcastand]

Hi sorry was on holiday and kind of disconnected for a bit. I'm totally fine with the solution as long as i can do something that works, it makes sense to let the default behavior for those that want it.

[kirillzyusko]

Closing as it was handled in #94

The changes will be published in 1.1.0 version

[kirillzyusko]

1.1.0 has been published to npm