Overlay

Introduction

Overlay is a generic low-level component for rendering content on top of its siblings, or above the entire application.

It combines a Portal, which allows JSX children to be rendered at a different place in the DOM tree, with a CSSTransition to support elegant enter and leave transitions.

An optional "backdrop" element can be rendered behind the overlaid children to provide modal behavior, whereby the overlay prevents interaction with anything behind it.

Overlay is the backbone of some other components listed in the sidebar, like Alert, Popover, Dialog, and more. Using Overlay directly should be rare in your app; it should only be necessary if no existing component meets your needs.

Examples

Edit the code to make the Overlay appear.

Usage

Overlay

Overlay is stateless — whether it is open or closed is determined by the isOpen prop. The following example shows how to combine it with a Button to control its state.

import { useState } from "react";
import { Overlay } from "@commure/components-foundation";
const OverlayExample = (props) => {
const [isOpen, setIsOpen] = useState(false);
return (
<div>
<Button text="Show overlay" onClick={() => setIsOpen(prevIsOpen => !prevIsOpen)} />
<Overlay isOpen={isOpen}>
Overlaid contents...
</Overlay>
</div>
);
}
export OverlayExample;

API Reference

Overlay

Prop NameRequired?TypeDescription
autoFocusfalsebooleanWhether the overlay should acquire application focus when it first opens.
backdropClassNamefalsestringCSS class names to apply to backdrop element.
backdropPropsfalseHTMLProps<HTMLDivElement>HTML props for the backdrop element.
canEscapeKeyClosefalsebooleanWhether pressing the `esc` key should invoke `onClose`.
canOutsideClickClosefalsebooleanWhether clicking outside the overlay element (either on backdrop when present or on document) should invoke `onClose`.
classNamefalsestringA space-delimited list of class names to pass along to a child element.
enforceFocusfalsebooleanWhether the overlay should prevent focus from leaving itself. That is, if the user attempts to focus an element outside the overlay and this prop is enabled, then the overlay will immediately bring focus back to itself. If you are nesting overlay components, either disable this prop on the "outermost" overlays or mark the nested ones `usePortal={false}`.
hasBackdropfalsebooleanWhether a container-spanning backdrop element should be rendered behind the contents.
isOpentruebooleanToggles the visibility of the overlay and its children. This prop is required because the component is controlled.
lazyfalsebooleanIf `true` and `usePortal={true}`, the `Portal` containing the children is created and attached to the DOM when the overlay is opened for the first time; otherwise this happens when the component mounts. Lazy mounting provides noticeable performance improvements if you have lots of overlays at once, such as on each row of a table.
onClosefalse(event?: SyntheticEvent<HTMLElement>) => voidA callback that is invoked when user interaction causes the overlay to close, such as clicking on the overlay or pressing the `esc` key (if enabled). Receives the event from the user's interaction, if there was an event (generally either a mouse or key event). Note that, since this component is controlled by the `isOpen` prop, it will not actually close itself until that prop becomes `false`.
onClosedfalse(node: HTMLElement) => voidLifecycle method invoked just after the CSS _close_ transition ends but before the child has been removed from the DOM. Receives the DOM element of the child being closed.
onClosingfalse(node: HTMLElement) => voidLifecycle method invoked just before the CSS _close_ transition begins on a child. Receives the DOM element of the child being closed.
onOpenedfalse(node: HTMLElement) => voidLifecycle method invoked just after the CSS _open_ transition ends. Receives the DOM element of the child being opened.
onOpeningfalse(node: HTMLElement) => voidLifecycle method invoked just after mounting the child in the DOM but just before the CSS _open_ transition begins. Receives the DOM element of the child being opened.
portalClassNamefalsestringSpace-delimited string of class names applied to the `Portal` element if `usePortal={true}`.
portalContainerfalseHTMLElementThe container element into which the overlay renders its contents, when `usePortal` is `true`. This prop is ignored if `usePortal` is `false`.
transitionDurationfalsenumberIndicates how long (in milliseconds) the overlay's enter/leave transition takes. This is used by React `CSSTransition` to know when a transition completes and must match the duration of the animation in CSS. Only set this prop if you override Blueprint's default transitions with new transitions of a different length.
transitionNamefalsestringName of the transition for internal `CSSTransition`. Providing your own name here will require defining new CSS transition properties.
usePortalfalsebooleanWhether the overlay should be wrapped in a `Portal`, which renders its contents in a new element attached to `portalContainer` prop. This prop essentially determines which element is covered by the backdrop: if `false`, then only its parent is covered; otherwise, the entire page is covered (because the parent of the `Portal` is the `<body>` itself). Set this prop to `false` on nested overlays (such as `Dialog` or `Popover`) to ensure that they are rendered above their parents.

Related Reading

Blueprint Reference