Layers allow you to render children outside the DOM hierarchy of the parent. It's a wrapper around React createPortal that lets you use it as a component. This is particularly useful for places you might have needed to use z-index to overlay the screen before.

Props

Component props
Name
Type
Default
children
Required
React.Node
-
zIndex
interface Indexable { index(): number; }
-

An object representing the zIndex value of the Layer.

Server Rendering

Because creating a portal in Layer depends on DOM manipulation, if document is not present, such as in a server rendering environment, the children will not be rendered.

Overlaying Content

Child content will be rendered outside the DOM hierarchy for easy overlaying. Click to see an example.

zIndex

The example below shows using a `FixedZIndex` for the header zIndex and a `CompositeZIndex` to stack the Layer on top of it. Visit our Z-Index documentation for more details on how to use these utility classes.