Skip to main content
react-md
react-md - Portal - Demos

Simple Example

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.

Custom Portal Container

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"