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.
also known as Portal, Overlay
Props
Accessibility
Ready
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.
import { Fragment, useState } from 'react'; import { Box, Button, IconButton, Layer, Text } from 'gestalt'; export default function Example() { const [showLayer, setShowLayer] = useState(false); return ( <Box padding={8} height="100%" display="flex" alignItems="center" justifyContent="center" > <Fragment> <Button text="Show Layer" onClick={() => setShowLayer(!showLayer)} /> {showLayer && ( <Layer> <Box color="darkWash" position="fixed" top left right bottom display="flex" alignItems="center" justifyContent="center" > <Box color="light" padding={3} display="flex" alignItems="center"> <Text>Layer Content</Text> <Box marginStart={2}> <IconButton accessibilityLabel="Close" icon="cancel" onClick={() => setShowLayer(!showLayer)} /> </Box> </Box> </Box> </Layer> )} </Fragment> </Box> ); }
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.
import { Fragment, useState } from 'react'; import { Box, Button, CompositeZIndex, FixedZIndex, IconButton, Layer, Text, } from 'gestalt'; const HEADER_ZINDEX = new FixedZIndex(100); export default function Example() { const [showLayer, setShowLayer] = useState(false); // Results in a zIndex of 101 const zIndex = new CompositeZIndex([HEADER_ZINDEX]); return ( <Box padding={8} height="100%" display="flex" alignItems="center" justifyContent="center" > <Fragment> <Button text="Show Layer" onClick={() => setShowLayer(!showLayer)} /> {showLayer && ( <Layer zIndex={zIndex}> <Box color="darkWash" position="fixed" top left right bottom display="flex" alignItems="center" justifyContent="center" > <Box color="light" padding={3} display="flex" alignItems="center"> <Text>Layer Content</Text> <Box marginStart={2}> <IconButton accessibilityLabel="Close" icon="cancel" onClick={() => setShowLayer(!showLayer)} /> </Box> </Box> </Box> </Layer> )} </Fragment> </Box> ); }
Component quality checklist
Quality item | Status | Status description |
---|---|---|
Figma Library | Component is not currently available in Figma. | |
Responsive Web | Ready | Component responds to changing viewport sizes in web and mobile web. |