Dialog

Introduction

Dialogs present content overlaid over other parts of the UI.

Examples

Usage

Dialog

import React from "react";
import { Dialog } from "@commure/components-foundation";
class MyDialog extends React.Component {
constructor(props) {
this.state = {
isOpen: false
};
this.handleOpen = this.handleOpen.bind(this);
this.handleClose = this.handleClose.bind(this);
}
handleOpen() {
this.setState({
isOpen: true
});
}
handleClose() {
this.setState({
isOpen: false
});
}
render() {
return (
<div>
<Button onClick={this.handleOpen}>Show Dialog</Button>
<Dialog
isOpen={this.state.isOpen}
onClose={this.handleClose}
title="Dialog"
>
<div className="Classes.DIALOG">
<p> Example dialog </p>
</div>
</Dialog>
</div>
);
}
}
export default MyDialog;

API Reference

Dialog

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}`.
hasBackdropfalsebooleanDialog always has a backdrop so this prop is excluded from the public API. @internal
iconfalseIconName | MaybeElementName of a Blueprint UI icon (or an icon element) to render in the dialog's header. Note that the header will only be rendered if `title` is provided.
isCloseButtonShownfalsebooleanWhether to show the close button in the dialog's header. Note that the header will only be rendered if `title` is provided.
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`.
stylefalseCSSPropertiesCSS styles to apply to the dialog.
titlefalseReact.ReactNodeTitle of the dialog. If provided, an element with `Classes.DIALOG_HEADER` will be rendered inside the dialog before any children elements.
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