How to render using utility functions in React Dialog

4 Sep 202621 minutes to read

The React Dialog component provides built-in utility functions to render alert and confirm dialogs with minimal code.
The following options are used as an argument on calling the utility functions:

Options Description
title Specifies the title of React Dialog like the header property.
content Specifies the value that can be displayed in React Dialog’s content area like the content property.
isModal A boolean value that determines whether the React Dialog is displayed as modal or non-modal. For more details, refer to the isModal property.
position Specifies the position of the alert or confirm React Dialog within the document. For more details, refer to the position property. The default value is { X: 'center', Y: 'center' }.
okButton Configures the OK button with properties and click events. The okButton object follows the ButtonModel interface: { icon: 'prefix icon to the button', cssClass: 'custom class to the button', click: 'action for OK button click', text: 'Yes' // Default value is 'OK' }.
cancelButton Configures the Cancel button with properties and click events. The cancelButton object follows the ButtonModel interface: { icon: 'prefix icon to the button', cssClass: 'custom class to the button', click: 'action for Cancel button click', text: 'No' // Default value is 'Cancel' }.
isDraggable A boolean value that determines whether the React Dialog can be dragged.
showCloseIcon When set to true, the close icon is shown in the React Dialog component.
closeOnEscape When set to true, the React Dialog can be closed by pressing the Esc key.
animationSettings Specifies the animation settings of the React Dialog component.
cssClass Specifies the CSS class name that can be appended to the React Dialog.
zIndex Specifies the z-index of the React Dialog, controlling whether it appears in front of or behind other components.
open Event which is triggered after the React Dialog is opened.
close Event which is triggered after the React Dialog is closed.

The DialogUtility.alert() and DialogUtility.confirm() methods return a React Dialog instance, which can be used to programmatically call hide() or access other React Dialog methods.

Alert dialog

An alert dialog box is used to display warning like messages to the users. Use the following code to render a simple alert dialog in an application.

[Class-component]

import { DialogUtility } from '@syncfusion/ej2-popups';
import * as React from "react";
class App extends React.Component {
    buttonClick() {
        DialogUtility.alert('This is an Alert Dialog!');
    }
    render() {
        return (<button className="e-control e-btn" onClick={this.buttonClick} id="targetButton" role="button">Open Alert Dialog</button>);
    }
}
export default App;
import { DialogUtility } from '@syncfusion/ej2-popups';
import * as React from "react";

class App extends React.Component<{}, {}> {
  public buttonClick(): void {
    DialogUtility.alert('This is an Alert Dialog!');
}
public render() {
return (
  <button className="e-control e-btn" onClick={this.buttonClick} id="targetButton" role="button">Open Alert Dialog</button>);
}
}
export default App;

[Functional-component]

import { DialogUtility } from '@syncfusion/ej2-popups';
import * as React from "react";
function App() {
    function buttonClick() {
        DialogUtility.alert('This is an Alert Dialog!');
    }
    return (<button className="e-control e-btn" onClick={buttonClick} id="targetButton" role="button">Open Alert Dialog</button>);
}
export default App;
import { DialogUtility } from '@syncfusion/ej2-popups';
import * as React from "react";

function App() {
  function buttonClick(): void {
      DialogUtility.alert('This is an Alert Dialog!');
  }
  return (
    <button className="e-control e-btn" onClick={buttonClick} id="targetButton" role="button">Open Alert Dialog</button>);
}

export default App;

Render an alert dialog with options

The DialogUtility.alert() method accepts either a content string or an options object. When passing an options object, the function signature is:

DialogUtility.alert({ title, content, okButton, showCloseIcon, ... });

[Class-component]

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(<App />, document.getElementById('container'));
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import App  from './App';

ReactDOM.render(<App />, document.getElementById('container'));
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion React Dialog Utility</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <link href="styles.css" rel="stylesheet" />
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-base/styles/tailwind3.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-react-buttons/styles/tailwind3.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-react-popups/styles/tailwind3.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
</head>

<body>
    <div id='container'>
        <div id="dialog">
            <div id='loader'>Loading....</div>
        </div>
    </div>
</body>

</html>

[Functional-component]

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(<App />, document.getElementById('container'));
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import App  from './App';

ReactDOM.render(<App />, document.getElementById('container'));
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion React Dialog Utility</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <link href="styles.css" rel="stylesheet" />
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-base/styles/tailwind3.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-react-buttons/styles/tailwind3.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-react-popups/styles/tailwind3.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
</head>

<body>
    <div id='container'>
        <div id="dialog">
            <div id='loader'>Loading....</div>
        </div>
    </div>
</body>

</html>

Confirm dialog

A confirm dialog displays a specified message along with OK and Cancel buttons.

[Class-component]

import { DialogUtility } from '@syncfusion/ej2-popups';
import * as React from "react";
class App extends React.Component {
    buttonClick() {
        DialogUtility.confirm('This is a Confirmation Dialog!');
    }
    render() {
        return (<button className="e-control e-btn" onClick={this.buttonClick = this.buttonClick.bind(this)} id="targetButton" role="button">Open Confirm Dialog</button>);
    }
}
export default App;
import { DialogUtility } from '@syncfusion/ej2-popups';
import * as React from "react";

class App extends React.Component<{}, {}> {
  public buttonClick(): void {
    DialogUtility.confirm('This is a Confirmation Dialog!');
}
  public render() {
    return (
    <button className="e-control e-btn" onClick={this.buttonClick = this.buttonClick.bind(this)} id="targetButton" role="button">Open Confirm Dialog</button>
    );
  }
}
export default App;

[Functional-component]

import { DialogUtility } from '@syncfusion/ej2-popups';
import * as React from "react";
function App() {
    function buttonClick() {
        DialogUtility.confirm('This is a Confirmation Dialog!');
    }
    return (<button className="e-control e-btn" onClick={buttonClick.bind(this)} id="targetButton" role="button">Open Confirm Dialog</button>);
}
export default App;
import { DialogUtility } from '@syncfusion/ej2-popups';
import * as React from "react";

function App() {
    function buttonClick(): void {
      DialogUtility.confirm('This is a Confirmation Dialog!');
    }

    return (
      <button className="e-control e-btn" onClick={buttonClick.bind(this)} id="targetButton" role="button">Open Confirm Dialog</button>
    );
}

export default App;

Render a confirmation dialog with options

[Class-component]

import { DialogUtility } from '@syncfusion/ej2-popups';
import * as React from "react";
class App extends React.Component {
    buttonClick() {
        DialogUtility.confirm({
            animationSettings: { effect: 'Zoom' },
            cancelButton: { text: 'Cancel', click: this.cancelClick.bind(this) },
            closeOnEscape: true,
            content: "This is a Confirmation Dialog!",
            okButton: { text: 'OK', click: this.okClick.bind(this) },
            showCloseIcon: true,
            title: ' Confirmation Dialog',
        });
    }
    okClick() {
        alert('you clicked OK button');
    }
    cancelClick() {
        alert('you clicked Cancel button');
    }
    render() {
        return (<button className="e-control e-btn" onClick={this.buttonClick = this.buttonClick.bind(this)} id="targetButton" role="button">Open Confirm Dialog</button>);
    }
}
export default App;
import { DialogUtility } from '@syncfusion/ej2-popups';
import * as React from "react";

class App extends React.Component<{}, {}> {
  public buttonClick(): void {
    DialogUtility.confirm({
      animationSettings: { effect: 'Zoom' },
      cancelButton: {  text: 'Cancel', click: this.cancelClick.bind(this) },
      closeOnEscape: true,
      content: "This is a Confirmation Dialog!",
      okButton: {  text: 'OK', click: this.okClick.bind(this) },
      showCloseIcon: true,
      title: ' Confirmation Dialog',
    });
  }

  public okClick(): void {
    alert('you clicked OK button');
  }

  public cancelClick(): void {
    alert('you clicked Cancel button');
  }
  public render() {
  return (
    <button className="e-control e-btn" onClick={this.buttonClick = this.buttonClick.bind(this)} id="targetButton" role="button">Open Confirm Dialog</button>
  );
  }
  }
export default App;

[Functional-component]

import { DialogUtility } from '@syncfusion/ej2-popups';
import * as React from "react";
function App() {
    function buttonClick() {
        DialogUtility.confirm({
            animationSettings: { effect: 'Zoom' },
            cancelButton: { text: 'Cancel', click: cancelClick.bind(this) },
            closeOnEscape: true,
            content: "This is a Confirmation Dialog!",
            okButton: { text: 'OK', click: okClick.bind(this) },
            showCloseIcon: true,
            title: ' Confirmation Dialog',
        });
    }
    function okClick() {
        alert('you clicked OK button');
    }
    function cancelClick() {
        alert('you clicked Cancel button');
    }
    return (<button className="e-control e-btn" onClick={buttonClick.bind(this)} id="targetButton" role="button">Open Confirm Dialog</button>);
}
export default App;
import { DialogUtility } from '@syncfusion/ej2-popups';
import * as React from "react";

function App() {
    function buttonClick(): void {
      DialogUtility.confirm({
        animationSettings: { effect: 'Zoom' },
        cancelButton: {  text: 'Cancel', click: cancelClick.bind(this) },
        closeOnEscape: true,
        content: "This is a Confirmation Dialog!",
        okButton: {  text: 'OK', click: okClick.bind(this) },
        showCloseIcon: true,
        title: ' Confirmation Dialog',
      });
    }
  
    function okClick(): void {
      alert('you clicked OK button');
    }
  
    function cancelClick(): void {
      alert('you clicked Cancel button');
    }

    return (
      <button className="e-control e-btn" onClick={buttonClick.bind(this)} id="targetButton" role="button">Open Confirm Dialog</button>
    );
}

export default App;