Getting Started

29 Aug 202324 minutes to read

This section explain how to create the predefined dialogs in React application with its basic features in step-by-step procedure.

Dependencies

The following list of dependencies are required to use the React Dialog component in your application.

|-- @syncfusion/ej2-react-popups
    |-- @syncfusion/ej2-react-base
    |-- @syncfusion/ej2-react-buttons
    |-- @syncfusion/ej2-popups
        |-- @syncfusion/ej2-base
        |-- @syncfusion/ej2-buttons

Setup your development environment

You can use Create-react-app to setup the applications.

To install create-react-app run the following command.

```bash
   npm install -g create-react-app
```

Start a new project using create-react-app command as follows

<div class='tsx'>
  ```
  create-react-app quickstart --scripts-version=react-scripts-ts
  cd quickstart
  ```
</div>

<div class='jsx'>

  ```
    create-react-app quickstart
    cd quickstart
  ```
</div>

‘react-scripts-ts’ is used for creating React app with typescript.

Adding Syncfusion packages

All the available Essential JS 2 packages are published in npmjs.com public registry.
You can choose the component that you want to install. For this application, we are going to use Dialog component.

To install Dialog component, use the following command

npm install @syncfusion/ej2-react-popups –save

Adding CSS reference

Import the Dialog component’s required CSS references as follows in src/App.css.

@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-react-buttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-react-popups/styles/material.css";

The Custom Resource Generator (CRG) is an online web tool, which can be used to generate the custom script and styles for a set of specific components.
This web tool is useful to combine the required component scripts and styles in a single file.

Render a dialog using utility functions

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

Options	Description
title	Specifies the title of dialog like the header property.
content	Specifies the value that can be displayed in dialog’s content area like the content property.
isModal	Specifies the Boolean value whether the dialog can be displayed as modal or non-modal. For more details, refer to the isModal property.
position	Specifies the value where the alert or confirm dialog is positioned within the document. For more details, refer to the position property { X: ‘center’, Y: ‘center’}
okButton	Configures the OK button that contains button properties with the click events. okButton:{ 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 that contains button properties with the click events. cancelButton:{ 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	Specifies the value whether the alert or confirm dialog can be dragged by the user.
showCloseIcon	When set to true, the close icon is shown in the dialog component.
closeOnEscape	When set to true, you can close the dialog by pressing ESC key.
animationSettings	Specifies the animation settings of the dialog component.
cssClass	Specifies the CSS class name that can be appended to the dialog.
zIndex	Specifies the order of the dialog, that is displayed in front or behind of another component.
open	Event which is triggered after the dialog is opened.
Close	Event which is triggered after the dialog is closed.

Adding predefined dialogs to the application

Now, you can start adding React predefined dialog to the application. We have added predefined dialog component in src/App.tsx file using following code.

[Class-component]

import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { DialogUtility } from '@syncfusion/ej2-react-popups';
import * as React from "react";

class App extends React.Component<{}, {hideDialog: boolean;}> {
constructor(props: {}) {
        super(props);
        this.state = { };
    }
public buttonClick() {
    dialogObj = DialogUtility.alert({
        title: 'Low Battery',
        width: '250px',
        content: '10% of battery remaining'
    });
}
public render() {
  return (
  <div className="App" id='dialog-target'>
       <ButtonComponent id="alertBtn" cssClass="e-danger" onClick={this.buttonClick.bind(this)}>Alert</ButtonComponent>
  </div>);
   }
}
export default App;

import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { DialogUtility } from '@syncfusion/ej2-react-popups';
import * as React from "react";
class App extends React.Component {
    constructor(props) {
        super(props);
        this.state = {};
    }
    buttonClick() {
        dialogObj = DialogUtility.alert({
            title: 'Low Battery',
            width: '250px',
            content: '10% of battery remaining'
        });
    }
    render() {
        return (<div className="App" id='dialog-target'>
       <ButtonComponent id="alertBtn" cssClass="e-danger" onClick={this.buttonClick.bind(this)}>Alert</ButtonComponent>
  </div>);
    }
}
export default App;

[Functional-component]

import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { DialogUtility } from '@syncfusion/ej2-react-popups';
import * as React from "react";

function App(){
    function buttonClick() {
        dialogObj = DialogUtility.alert({
            title: 'Low Battery',
            width: '250px',
            content: '10% of battery remaining'
        });
    }

    return (
        <div className="App" id='dialog-target'>
            <ButtonComponent id="alertBtn" cssClass="e-danger" onClick={buttonClick.bind(this)}>Alert</ButtonComponent>
        </div>
    );
}
export default App;

import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { DialogUtility } from '@syncfusion/ej2-react-popups';
import * as React from "react";
function App() {
    function buttonClick() {
        dialogObj = DialogUtility.alert({
            title: 'Low Battery',
            width: '250px',
            content: '10% of battery remaining'
        });
    }
    return (<div className="App" id='dialog-target'>
            <ButtonComponent id="alertBtn" cssClass="e-danger" onClick={buttonClick.bind(this)}>Alert</ButtonComponent>
        </div>);
}
export default App;

Run the application

Now use the npm run start command to run the application in the browser.

npm run start

The below example shows the alert dialog.

[Class-component]

app.jsx

import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { DialogUtility } from '@syncfusion/ej2-react-popups';
import * as React from "react";
class App extends React.Component {
    constructor(props) {
        super(props);
        this.state = {};
    }
    buttonClick() {
        dialogObj = DialogUtility.alert({
            title: 'Low Battery',
            width: '250px',
            content: '10% of battery remaining'
        });
    }
    render() {
        return (<div className="App" id='dialog-target'>
       <ButtonComponent id="alertBtn" cssClass="e-danger" onClick={this.buttonClick.bind(this)}>Alert</ButtonComponent>
  </div>);
    }
}
export default App;

app.tsx

import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { DialogUtility } from '@syncfusion/ej2-react-popups';
import * as React from "react";

class App extends React.Component<{}, {}> {
constructor(props: {}) {
        super(props);
        this.state = { };
    }
public buttonClick() {
    dialogObj = DialogUtility.alert({
        title: 'Low Battery',
        width: '250px',
        content: '10% of battery remaining'
    });
}
public render() {
  return (
  <div className="App" id='dialog-target'>
       <ButtonComponent id="alertBtn" cssClass="e-danger" onClick={this.buttonClick.bind(this)}>Alert</ButtonComponent>
  </div>);
  }
}
export default App;

[Functional-component]

app.jsx

import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { DialogUtility } from '@syncfusion/ej2-react-popups';
import * as React from "react";
function App() {
    function buttonClick() {
        dialogObj = DialogUtility.alert({
            title: 'Low Battery',
            width: '250px',
            content: '10% of battery remaining'
        });
    }
    return (<div className="App" id='dialog-target'>
            <ButtonComponent id="alertBtn" cssClass="e-danger" onClick={buttonClick.bind(this)}>Alert</ButtonComponent>
        </div>);
}
export default App;

app.tsx

import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { DialogUtility } from '@syncfusion/ej2-react-popups';
import * as React from "react";

function App() {
    function buttonClick() {
        dialogObj = DialogUtility.alert({
            title: 'Low Battery',
            width: '250px',
            content: '10% of battery remaining'
        });
    }

    return (
        <div className="App" id='dialog-target'>
            <ButtonComponent id="alertBtn" cssClass="e-danger" onClick={buttonClick.bind(this)}>Alert</ButtonComponent>
        </div>
    );

}
export default App;

Alert dialog

An alert dialog box used to display an errors, warnings, and information alerts that needs user awareness. The alert dialog is displayed along with the OK button. When user clicks on ‘OK’ button, alert dialog will get closed. Use the following code to render a simple alert dialog in an application.

[Class-component]

app.jsx

import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { DialogUtility } from '@syncfusion/ej2-react-popups';
import * as React from "react";
let dialogObj;
class App extends React.Component {
    constructor(props) {
        super(props);
        this.state = {};
    }
    buttonClick() {
        document.getElementById("statusText").style.display = "none";
        dialogObj = DialogUtility.alert({
            title: 'Low Battery',
            width: '250px',
            content: '10% of battery remaining',
            okButton: { click: this.alertOkAction.bind(this) },
        });
    }
    alertOkAction() {
        dialogObj.hide();
        document.getElementById('statusText').innerHTML =
            'The user closed the Alert dialog.';
        document.getElementById('statusText').style.display = 'block';
    }
    render() {
        return (<div className="App" id='dialog-target'>
       <ButtonComponent id="alertBtn" cssClass="e-danger" onClick={this.buttonClick.bind(this)}>Alert</ButtonComponent>
       <span id="statusText"></span>
  </div>);
    }
}
export default App;

app.tsx

import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { DialogUtility } from '@syncfusion/ej2-react-popups';
import * as React from "react";

let dialogObj;
class App extends React.Component<{}, {}> {
constructor(props: {}) {
        super(props);
        this.state = { };
    }
public buttonClick() {
    document.getElementById("statusText").style.display = "none";
    dialogObj = DialogUtility.alert({
        title: 'Low Battery',
        width: '250px',
        content: '10% of battery remaining',
        okButton: { click: this.alertOkAction.bind(this) },
    });
}
public alertOkAction() {
    dialogObj.hide();
    document.getElementById('statusText').innerHTML =
      'The user closed the Alert dialog.';
    document.getElementById('statusText').style.display = 'block';
}
public render() {
  return (
  <div className="App" id='dialog-target'>
       <ButtonComponent id="alertBtn" cssClass="e-danger" onClick={this.buttonClick.bind(this)}>Alert</ButtonComponent>
       <span id="statusText"></span>
  </div>);
   }
}
export default App;

[Functional-component]

app.jsx

import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { DialogUtility } from '@syncfusion/ej2-react-popups';
import * as React from "react";
let dialogObj;
function App() {
    function buttonClick() {
        document.getElementById("statusText").style.display = "none";
        dialogObj = DialogUtility.alert({
            title: 'Low Battery',
            width: '250px',
            content: '10% of battery remaining',
            okButton: { click: alertOkAction.bind(this) },
        });
    }
    function alertOkAction() {
        dialogObj.hide();
        document.getElementById('statusText').innerHTML =
            'The user closed the Alert dialog.';
        document.getElementById('statusText').style.display = 'block';
    }
    return (<div className="App" id='dialog-target'>
            <ButtonComponent id="alertBtn" cssClass="e-danger" onClick={buttonClick.bind(this)}>Alert</ButtonComponent>
            <span id="statusText"></span>
        </div>);
}
export default App;

app.tsx

import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { DialogUtility } from '@syncfusion/ej2-react-popups';
import * as React from "react";

let dialogObj;
function App() {
    function buttonClick() {
        document.getElementById("statusText").style.display = "none";
        dialogObj = DialogUtility.alert({
            title: 'Low Battery',
            width: '250px',
            content: '10% of battery remaining',
            okButton: { click: alertOkAction.bind(this) },
        });
    }
    function alertOkAction() {
        dialogObj.hide();
        document.getElementById('statusText').innerHTML =
        'The user closed the Alert dialog.';
        document.getElementById('statusText').style.display = 'block';
    }

    return (
        <div className="App" id='dialog-target'>
            <ButtonComponent id="alertBtn" cssClass="e-danger" onClick={buttonClick.bind(this)}>Alert</ButtonComponent>
            <span id="statusText"></span>
        </div>
    );
}
export default App;

Confirm dialog

A confirm dialog box used to displays a specified message along with the ‘OK’ and ‘Cancel’ button. It is used to get approval from the user, and it appears before any critical action. After get approval from the user the dialog will disappear automatically. Use the following code to render a simple confirm dialog in an application.

[Class-component]

app.jsx

import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { DialogUtility } from '@syncfusion/ej2-react-popups';
import * as React from "react";
let dialogObj;
class App extends React.Component {
    constructor(props) {
        super(props);
        this.state = {};
    }
    buttonClick() {
        document.getElementById("statusText").style.display = "none";
        dialogObj = DialogUtility.confirm({
            title: 'Delete Multiple Items',
            content: 'Are you sure you want to permanently delete these items?',
            width: '300px',
            okButton: { click: this.confirmOkAction.bind(this) },
            cancelButton: { click: this.confirmCancelAction.bind(this) }
        });
    }
    confirmOkAction() {
        dialogObj.hide();
        document.getElementById("statusText").innerHTML = " The user confirmed the dialog box";
        document.getElementById("statusText").style.display = "block";
    }
    confirmCancelAction() {
        dialogObj.hide();
        document.getElementById("statusText").innerHTML = "The user canceled the dialog box.";
        document.getElementById("statusText").style.display = "block";
    }
    render() {
        return (<div className="App" id='dialog-target'>
       <ButtonComponent id="confirmBtn" cssClass="e-success" onClick={this.buttonClick.bind(this)}>Confirm</ButtonComponent>
       <span id="statusText"></span>
  </div>);
    }
}
export default App;

app.tsx

import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { DialogUtility } from '@syncfusion/ej2-react-popups';
import * as React from "react";

let dialogObj;
class App extends React.Component<{}, {}> {
constructor(props: {}) {
        super(props);
        this.state = { };
    }
public buttonClick() {
    document.getElementById("statusText").style.display = "none";
    dialogObj = DialogUtility.confirm({
        title: 'Delete Multiple Items',
        content: 'Are you sure you want to permanently delete these items?',
        width: '300px',
        okButton: { click: this.confirmOkAction.bind(this) },
        cancelButton: { click: this.confirmCancelAction.bind(this) }
    });
}
public confirmOkAction() {
        dialogObj.hide();
        document.getElementById("statusText").innerHTML = " The user confirmed the dialog box";
        document.getElementById("statusText").style.display = "block";
}
public confirmCancelAction() {
        dialogObj.hide();
        document.getElementById("statusText").innerHTML = "The user canceled the dialog box.";
        document.getElementById("statusText").style.display = "block";
}
public render(){
  return (
  <div className="App" id='dialog-target'>
       <ButtonComponent id="confirmBtn" cssClass="e-success" onClick={this.buttonClick.bind(this)}>Confirm</ButtonComponent>
       <span id="statusText"></span>
  </div>);
   }
}
export default App;

[Functional-component]

app.jsx

import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { DialogUtility } from '@syncfusion/ej2-react-popups';
import * as React from "react";
let dialogObj;
function App() {
    function buttonClick() {
        document.getElementById("statusText").style.display = "none";
        dialogObj = DialogUtility.confirm({
            title: 'Delete Multiple Items',
            content: 'Are you sure you want to permanently delete these items?',
            width: '300px',
            okButton: { click: confirmOkAction.bind(this) },
            cancelButton: { click: confirmCancelAction.bind(this) }
        });
    }
    function confirmOkAction() {
        dialogObj.hide();
        document.getElementById("statusText").innerHTML = " The user confirmed the dialog box";
        document.getElementById("statusText").style.display = "block";
    }
    function confirmCancelAction() {
        dialogObj.hide();
        document.getElementById("statusText").innerHTML = "The user canceled the dialog box.";
        document.getElementById("statusText").style.display = "block";
    }
    return (<div className="App" id='dialog-target'>
            <ButtonComponent id="confirmBtn" cssClass="e-success" onClick={buttonClick.bind(this)}>Confirm</ButtonComponent>
            <span id="statusText"></span>
        </div>);
}
export default App;

app.tsx

import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { DialogUtility } from '@syncfusion/ej2-react-popups';
import * as React from "react";

let dialogObj;
function App(){
    function buttonClick() {
        document.getElementById("statusText").style.display = "none";
        dialogObj = DialogUtility.confirm({
            title: 'Delete Multiple Items',
            content: 'Are you sure you want to permanently delete these items?',
            width: '300px',
            okButton: { click: confirmOkAction.bind(this) },
            cancelButton: { click: confirmCancelAction.bind(this) }
        });
    }
    function confirmOkAction() {
            dialogObj.hide();
            document.getElementById("statusText").innerHTML = " The user confirmed the dialog box";
            document.getElementById("statusText").style.display = "block";
    }
    function confirmCancelAction() {
            dialogObj.hide();
            document.getElementById("statusText").innerHTML = "The user canceled the dialog box.";
            document.getElementById("statusText").style.display = "block";
    }

    return (
        <div className="App" id='dialog-target'>
            <ButtonComponent id="confirmBtn" cssClass="e-success" onClick={buttonClick.bind(this)}>Confirm</ButtonComponent>
            <span id="statusText"></span>
        </div>
    );

}
export default App;

Prompt dialog

A prompt dialog is used to get the input from the user. When the user clicks the ‘OK’ button the input value from the dialog is returned. If the user clicks the ‘Cancel’ button the null value is returned. After getting the input from the user the dialog will disappear automatically.

[Class-component]

app.jsx

import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { DialogUtility } from '@syncfusion/ej2-react-popups';
import * as React from "react";
let dialogObj;
class App extends React.Component {
    constructor(props) {
        super(props);
        this.state = {};
    }
    buttonClick() {
        document.getElementById("statusText").style.display = "none";
        dialogObj = DialogUtility.confirm({
            title: 'Join Chat Group',
            width: '300px',
            content: '<p>Enter your name:</p> <input id= "inputEle" type="text" name="Required" class="e-input" placeholder="Type here.." />',
            okButton: { click: this.promptOkAction.bind(this) },
            cancelButton: { click: this.promptCancelAction.bind(this) },
        });
    }
    promptOkAction() {
        let value;
        value = document.getElementById("inputEle").value;
        if (value == "") {
            dialogObj.hide();
            document.getElementById("statusText").innerHTML = "The user's input is returned as\" \" ";
            document.getElementById("statusText").style.display = "block";
        }
        else {
            dialogObj.hide();
            document.getElementById("statusText").innerHTML = "The user's input is returned as" + " " + value;
            document.getElementById("statusText").style.display = "block";
        }
    }
    promptCancelAction() {
        dialogObj.hide();
        document.getElementById("statusText").innerHTML = "The user canceled the prompt dialog";
        document.getElementById("statusText").style.display = "block";
    }
    render() {
        return (<div className="App" id='dialog-target'>
        <ButtonComponent id="promptBtn" isPrimary onClick={this.buttonClick.bind(this)}>Prompt</ButtonComponent>
       <span id="statusText"></span>
  </div>);
    }
}
export default App;

app.tsx

import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { DialogUtility } from '@syncfusion/ej2-react-popups';
import * as React from "react";

let dialogObj;
class App extends React.Component<{}, {}> {
constructor(props: {}) {
        super(props);
        this.state = { };
    }
public buttonClick() {
    document.getElementById("statusText").style.display = "none";
    dialogObj = DialogUtility.confirm({
        title: 'Join Chat Group',
      width: '300px',
      content:
        '<p>Enter your name:</p> <input id= "inputEle" type="text" name="Required" class="e-input" placeholder="Type here.." />',
      okButton: { click: this.promptOkAction.bind(this) },
      cancelButton: { click: this.promptCancelAction.bind(this) },
    });
}
public promptOkAction(){
    let value:string ;
    value = (document.getElementById("inputEle")as any).value;
    if (value==""){
        dialogObj.hide();
        document.getElementById("statusText").innerHTML = "The user's input is returned as\" \" ";
        document.getElementById("statusText").style.display="block";
    }
    else{
        dialogObj.hide();
        document.getElementById("statusText").innerHTML="The user's input is returned as" +" "+ value;
        document.getElementById("statusText").style.display="block";
    }
}
public promptCancelAction(){
        dialogObj.hide();
        document.getElementById("statusText").innerHTML="The user canceled the prompt dialog";
        document.getElementById("statusText").style.display="block";
}
public render() {
  return (
  <div className="App" id='dialog-target'>
        <ButtonComponent id="promptBtn" isPrimary onClick={this.buttonClick.bind(this)}>Prompt</ButtonComponent>
       <span id="statusText"></span>
  </div>);
   }
}
export default App;

[Functional-component]

app.jsx

import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { DialogUtility } from '@syncfusion/ej2-react-popups';
import * as React from "react";
let dialogObj;
function App() {
    function buttonClick() {
        document.getElementById("statusText").style.display = "none";
        dialogObj = DialogUtility.confirm({
            title: 'Join Chat Group',
            width: '300px',
            content: '<p>Enter your name:</p> <input id= "inputEle" type="text" name="Required" class="e-input" placeholder="Type here.." />',
            okButton: { click: promptOkAction.bind(this) },
            cancelButton: { click: promptCancelAction.bind(this) },
        });
    }
    function promptOkAction() {
        let value;
        value = document.getElementById("inputEle").value;
        if (value == "") {
            dialogObj.hide();
            document.getElementById("statusText").innerHTML = "The user's input is returned as\" \" ";
            document.getElementById("statusText").style.display = "block";
        }
        else {
            dialogObj.hide();
            document.getElementById("statusText").innerHTML = "The user's input is returned as" + " " + value;
            document.getElementById("statusText").style.display = "block";
        }
    }
    function promptCancelAction() {
        dialogObj.hide();
        document.getElementById("statusText").innerHTML = "The user canceled the prompt dialog";
        document.getElementById("statusText").style.display = "block";
    }
    return (<div className="App" id='dialog-target'>
                <ButtonComponent id="promptBtn" isPrimary onClick={buttonClick.bind(this)}>Prompt</ButtonComponent>
            <span id="statusText"></span>
        </div>);
}
export default App;

app.tsx

import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { DialogUtility } from '@syncfusion/ej2-react-popups';
import * as React from "react";

let dialogObj;
function App() {
    function buttonClick() {
        document.getElementById("statusText").style.display = "none";
        dialogObj = DialogUtility.confirm({
            title: 'Join Chat Group',
        width: '300px',
        content:
            '<p>Enter your name:</p> <input id= "inputEle" type="text" name="Required" class="e-input" placeholder="Type here.." />',
        okButton: { click: promptOkAction.bind(this) },
        cancelButton: { click: promptCancelAction.bind(this) },
        });
    }
    function promptOkAction(){
        let value:string ;
        value = (document.getElementById("inputEle")as any).value;
        if (value==""){
            dialogObj.hide();
            document.getElementById("statusText").innerHTML = "The user's input is returned as\" \" ";
            document.getElementById("statusText").style.display="block";
        }
        else{
            dialogObj.hide();
            document.getElementById("statusText").innerHTML="The user's input is returned as" +" "+ value;
            document.getElementById("statusText").style.display="block";
        }
    }
    function promptCancelAction(){
            dialogObj.hide();
            document.getElementById("statusText").innerHTML="The user canceled the prompt dialog";
            document.getElementById("statusText").style.display="block";
    }

    return (
        <div className="App" id='dialog-target'>
                <ButtonComponent id="promptBtn" isPrimary onClick={buttonClick.bind(this)}>Prompt</ButtonComponent>
            <span id="statusText"></span>
        </div>
    );
}
export default App;