Portal

<Portal> is a component that allows you to render children into a DOM node that exists outside the DOM hierarchy of the parent component.

This is useful when your UI has some elements that need to appear on top of everything else, such as modals and tooltips.

1
2
3
4
5
6

function Portal(props: {
  mount?: Node;
  useShadow?: boolean;
  isSVG?: boolean;
  children: JSX.Element;
}): Text;

This inserts the element in the mount node. Useful for inserting Modals outside of the page layout. Events still propagate through the Component Hierarchy.

The portal is mounted in a <div> unless the target is the document head. useShadow places the element in a Shadow Root for style isolation, and isSVG is required if inserting into an SVG element so that the <div> is not inserted.

1
2
3

<Portal mount={document.getElementById("modal")}>
  <div>My Content</div>
</Portal>

Props¶

Комментарии