close overlay when click outside in react

In this article, we will explore the functionality of a dialog component using the Syncfusion library in a React application. The dialog is a crucial UI element that provides users with important information or options without navigating away from the current page.

Key Features of the Dialog Component

1- Close Options: By default, the dialog can be closed using several methods:
  • Pressing the Esc key.
  • Clicking the close icon located on the right side of the dialog header.
  • Clicking outside the dialog area, which triggers the hide method to close the dialog.
2- Preventing Closure with Esc Key: To customize the user experience, you can set the CloseOnEscape property to false. This will prevent the dialog from closing when the Esc key is pressed, ensuring users cannot accidentally dismiss the dialog.
3- Clicking Outside to Close: The sample code provided demonstrates how to close the dialog by clicking outside of its boundaries. This is implemented using an event listener that invokes the hide method on the dialog instance. 
import { DialogComponent } from '@syncfusion/ej2-react-popups';
import * as React from "react";
class App extends React.Component {
    settings = { effect: 'Zoom', duration: 400, delay: 0 };
    dialogInstance;
    buttons = [{
            buttonModel: {
                content: 'Close',
                cssClass: 'e-flat',
                isPrimary: true,
            },
            'click': () => {
                this.dialogInstance.hide();
            }
        }];
    handleClick() {
        this.dialogInstance.show();
    }
    componentDidMount() {
        document.onclick = (args) => {
            if (args.target.id === 'dialog-target') {
                this.dialogInstance.hide();
            }
        };
    }
    render() {
   return (<div className="App" id='dialog-target'>
    <button className='e-control e-btn' id='targetButton1' role='button' onClick={this.handleClick = this.handleClick.bind(this)}>Open
    <DialogComponent header='Delete Multiple Items' showCloseIcon={true} visible={true} animationSettings={this.settings} width='300px' buttons={this.buttons} closeOnEscape={true} content='Are you sure you want to permanently delete all of these items?' ref={dialog => this.dialogInstance = dialog} target='#dialog-target'/>
   </div>);
    }
}
export default App;

Sample Code Breakdown

The code sample provided illustrates the implementation of a dialog component with a close button and customizable close behavior:
  • Dialog Settings: The dialog is configured with animation settings (effect, duration, and delay) to enhance user experience.
  • Close Button: A button is included that, when clicked, will hide the dialog.
  • Event Handling: The componentDidMount lifecycle method sets up an event listener on the document that listens for clicks. If the click target matches the dialog’s designated area, the dialog will close.
  • Rendering the Component: The render method returns the main application structure, including a button to open the dialog and the dialog itself, preconfigured with a header, content, and close options.

Live Example:

Conclusion

This article demonstrates how to effectively manage a dialog component in a React application using the Syncfusion library. By understanding the default behaviors and customization options, developers can create a more interactive and user-friendly experience in their applications.