A really good example for portals is the fixing overflow issues example in the overlay package. I'll add another example blow for using the portal, but the fix is really only valid on iOS devices.
This example will implement an example of a dropdown menu from the @react-md/menu
package, but with a lot of the functionality not implemented. When you set
overflow: auto or any non-default value, iOS devices might not actually render
it if the element has position: fixed. In these cases, you can use the
Portal component to render your fixed element outside of the scroll container
to ensure it is rendered.
In condimentum ultrices metus ut viverra. In faucibus erat eu massa tincidunt finibus. Donec eget quam venenatis, venenatis arcu sed, mollis tellus. Mauris massa nunc, condimentum quis nisi vel, fermentum pellentesque est. Pellentesque varius rhoncus dui. Donec suscipit gravida justo eu pharetra. Donec suscipit neque a orci bibendum, a consectetur ipsum finibus. Aenean est ligula, aliquet ut nunc vitae, volutpat pharetra tortor. Cras ipsum mi, posuere eu diam a, cursus euismod mi. Ut vitae eros nibh.
By default, the Portal will render as the last child in the document.body.
You can provide either the into or intoId props to manually select where the
children should be portalled to instead.
The intoId prop will attempt to find an element with the provided id and
render inside of that element while the into prop can either be a query string
for
document.querySelector
or a function that returns a DOM element.
"example-portal-container-1""example-portal-container-2""example-portal-container-3"