Portal

Portals provide a way to render children into a DOM node that exists outside the DOM hierarchy of the parent component.

Usage

Normally, when you return an element from a component’s render method, it’s mounted into the DOM as a child of the nearest parent node:

render() {
  return (
    <View>
      {this.props.children}
    </View>
  );
}

However, sometimes it’s useful to insert a child into a different location in the DOM:

render() {
  return (
      <Portal.Provider>
        <View testID="portal-host-wrapper">
          <Portal.Host name="placeholder" />
        </View>
        <View tetID="real-parent">
          <Portal hostName="placeholder">
            <Typography.Body>Hello world</Typography.Body>;
          </Portal>
        </View>
      </Portal.Provider>
  );
}

Above example, Hello world will be rendered inside portal-host-wrapper View instead of real parent View

note

Portal.Provider is a Portal.Host with default host name is root

Examples

Basic

• render FAB outside of parent box

FAB's parent



Shout out

Customizing children theme

We can pass a custom theme to Portal component to change the theme of children components.

FAB's parent



Shout out

Props

Portal

	Prop	Required	Default	Type
	hostName			string
	name			string
	theme			Theme

Portal.Host

	Prop	Required	Default	Type
	name	required		string

Portal.Provider

	Prop	Required	Default	Type
	rootHostName		root	string