[Mantine UI Series] Portal & wthinPortal Property

[reboottime]

Portal

1. The createPortal function allows you to render certain children into a different part of the DOM, such as displaying a modal or a drawer outside of the current DOM structure.

2. One notable thing about createPortal is we can't use it on the server side. This is why, in the Portal source code of Manine UI, the createPortal function is invoked after the entire component has been mounted.

[reboottime]

The withinPortal property in some of Mantine UI components

In Mantine UI, there are several components that support rendering components part using Portal, such as Drawer, Modal, Popover and Select via supporting withInPortal property.

When using a portal to render a component part under the body element, there are several things to consider

• Locate the component part at where such that there is no content cut off when the zone left is not enough to cover portal content
• Adjust the portal's content position correspondingly to match UI effect needs
• How to handle scroll, resizing interaction while keeping the UI position right