The Ignite UI for React Dialog component is used to display some information or prompt the user for an action or confirmation. It is shown in a modal window, which means that the user is not allowed to interact with the main app until a certain action is performed that closes the dialog.
Ignite UI for React Dialog Example
This sample demonstrates how to create a Dialog component in React.
EXAMPLE
TSX
CSS
importReactfrom'react';
importReactDOMfrom'react-dom/client';
import'./index.css';
import { IgrButton, IgrDialog, IgrButtonModule, IgrDialogModule } from"@infragistics/igniteui-react";
import'igniteui-webcomponents/themes/light/bootstrap.css';
IgrButtonModule.register();
IgrDialogModule.register();
exportdefaultclass DialogOverview extendsReact.Component<any, any> {
public dialogRef: IgrDialog;
constructor(props: any) {
super(props);
this.onDialogRef = this.onDialogRef.bind(this);
this.onDialogShow = this.onDialogShow.bind(this);
this.onDialogHide = this.onDialogHide.bind(this);
}
publicrender(): JSX.Element {
return (
<divclassName="container sample"><IgrButtonvariant="contained"clicked={this.onDialogShow}><span>Show Dialog</span></IgrButton><IgrDialogtitle="Confirmation"ref={this.onDialogRef}><p>Are you sure you want to delete the Annual_Report_2016.pdf and Annual_Report_2017.pdf files?</p><divslot="footer"><IgrButtonclicked={this.onDialogHide}variant="flat"><span>Cancel</span></IgrButton><IgrButtonclicked={this.onDialogHide}variant="flat"><span>OK</span></IgrButton></div></IgrDialog></div>
);
}
public onDialogRef(dialog: IgrDialog){
if (!dialog) { return; }
this.dialogRef = dialog;
}
public onDialogShow() {
if(this.dialogRef){
this.dialogRef.show();
}
}
public onDialogHide() {
if(this.dialogRef){
this.dialogRef.hide();
}
}
}
// rendering above class to the React DOMconstroot = ReactDOM.createRoot(document.getElementById('root'));
root.render(<DialogOverview/>);
tsx
/* shared styles are loaded from: *//* https://static.infragistics.com/xplatform/css/samples */css
Like this sample? Get access to our complete Ignite UI for React toolkit and start building your own apps in minutes. Download it for free.
Usage
First, you need to the install the corresponding Ignite UI for React npm package by running the following command:
npm install igniteui-react
cmd
You will then need to import the React IgrDialog, its necessary CSS, and register its module, like so:
For a complete introduction to the Ignite UI for React, read the Getting Started topic.
The simplest way to display the dialog component is to use its show method and call it on a button click.
<IgrButtonvariant="contained"clicked={this.onDialogShow}><span>Show Dialog</span></IgrButton><IgrDialogref={this.onDialogRef}><span>Dialog Message</span></IgrDialog>public onDialogRef(dialog: IgrDialog) {
if (!dialog) { return; }
this.dialogRef = dialog;
}
public onDialogShow() {
if (this.dialogRef) {
this.dialogRef.show();
}
}
tsx
The Dialog component provides an open property, which gives you the ability to configure its state as per your application scenario.
Use the title property to set the title of the dialog. However, if any content is provided in the title slot, it will take precedence over the property.
Action buttons or additional information can be placed in the bottom part of the dialog via the footer slot. If no content is added there, a default OK button will be shown that closes the Dialog when clicked. In case you do not want this button to be shown you can set the hideDefaultAction property to true. The default value is false.
Closing
By default, the Dialog is closed automatically when the user presses ESC. You could prevent this behavior using the keepOpenOnEscape property. The default value is false. If there is an open dropdown (or any other element that should handle ESC internally) in the dialog, pressing ESC once will close the dropdown and pressing it again will close the dialog.
Use the closeOnOutsideClick property to configure if the dialog should be closed when clicking outside of it. The default value is false.
EXAMPLE
TSX
CSS
importReactfrom'react';
importReactDOMfrom'react-dom/client';
import'./index.css';
import { IgrButton, IgrDialog, IgrSwitch, IgrButtonModule, IgrDialogModule, IgrSwitchModule } from"@infragistics/igniteui-react";
import'igniteui-webcomponents/themes/light/bootstrap.css';
IgrButtonModule.register();
IgrDialogModule.register();
IgrSwitchModule.register();
exportdefaultclass DialogClosingVariations extendsReact.Component<any, any> {
public dialogRef: IgrDialog;
constructor(props: any) {
super(props);
this.onDialogRef = this.onDialogRef.bind(this);
this.onDialogShow = this.onDialogShow.bind(this);
this.onDialogHide = this.onDialogHide.bind(this);
this.onSwitchChangeEscape = this.onSwitchChangeEscape.bind(this);
this.onSwitchChangeClick = this.onSwitchChangeClick.bind(this);
}
publicrender(): JSX.Element {
return (
<divclassName="container sample"><IgrSwitchlabelPosition="Before"change={this.onSwitchChangeEscape}><span>keepOpenOnEscape</span></IgrSwitch><IgrSwitchlabelPosition="Before"change={this.onSwitchChangeClick}><span>closeOnOutsideClick</span></IgrSwitch><IgrButtonvariant="contained"clicked={this.onDialogShow}><span>Show Dialog</span></IgrButton><IgrDialogtitle="Confirmation"ref={this.onDialogRef}><p>Are you sure you want to delete the Annual_Report_2016.pdf and Annual_Report_2017.pdf files?</p><divslot="footer"><IgrButtonclicked={this.onDialogHide}variant="flat"><span>Cancel</span></IgrButton><IgrButtonclicked={this.onDialogHide}variant="flat"><span>OK</span></IgrButton></div></IgrDialog></div>
);
}
public onDialogRef(dialog: IgrDialog){
if (!dialog) { return; }
this.dialogRef = dialog;
}
public onDialogShow() {
if(this.dialogRef){
this.dialogRef.show();
}
}
public onDialogHide() {
if(this.dialogRef){
this.dialogRef.hide();
}
}
public onSwitchChangeEscape(e: any) {
this.dialogRef.keepOpenOnEscape = e.checked;
}
public onSwitchChangeClick(e: any) {
this.dialogRef.closeOnOutsideClick = e.checked;
}
}
// rendering above class to the React DOMconstroot = ReactDOM.createRoot(document.getElementById('root'));
root.render(<DialogClosingVariations/>);
tsx
/* shared styles are loaded from: *//* https://static.infragistics.com/xplatform/css/samples */css
Form
Form elements can close a Dialog if they have the attribute method="dialog". Submitting the form will trigger the closing of the dialog.