React Migration in Dialog Component

This section explains how to migrate the Dialog component from EJ2 React to React. It provides a detailed comparison of APIs, including props, methods and events.

Properties

EJ2 React	React	Description
Props: `animationSettings` `<DialogComponent id="Dialog" animationSettings={{ effect: 'FadeZoom', duration: 400 ,delay: 0}}/>`	Props: `animation` `<Dialog animation={{ effect: 'FadeZoom', duration: 400, delay: 0 }} />`	The `animationSettings` property in EJ2 React has been renamed to `animation` in React. It specifies the animation effect, duration, and delay for the dialog's entry and exit.
Props: `showCloseIcon` `<DialogComponent id="Dialog " showCloseIcon={true}/>`	Props: `closeIcon` `<Dialog closeIcon={true} />`	The `showCloseIcon` property in EJ2 React has been renamed to `closeIcon` in React. It specifies the close icon to display in the dialog header. When set to true, displays the default close icon. When set to a ReactNode, displays the custom icon/element provided. When set to false, no close icon is displayed.
Props: `cssClass` `<DialogComponent cssClass='e-Dialog '></DialogComponent >`	Props: `className` `<Dialog className='sf-Dialog '></Dialog >`	The `cssClass` prop in EJ2 React is replaced with the standard React `className` prop in React.
Props: `allowDragging` `<DialogComponent allowDragging={true}></DialogComponent >`	Props: `draggable` `<Dialog draggable={true}></Dialog >`	The `allowDragging` property in EJ2 React has been renamed to `draggable` in React. It specifies whether the `dialog` can be dragged by its header to reposition it.
Props: `isModal` `<DialogComponent isModal={true}></DialogComponent >`	Props: `modal` `<Dialog modal={true}></Dialog >`	The `isModal` property in EJ2 React has been renamed to `modal` in React. Specifies if the `dialog` should behave as a `modal`. When true, an overlay prevents interaction with the underlying content, traps focus within the `dialog`, and blocks scrolling of the background content. When false, the `dialog` appears without an overlay and allows interaction with the page behind it.
Props: `enableResize` `<DialogComponent enableResize={true}></DialogComponent >`	Props: `resizable` `<Dialog resizable={true}></Dialog >`	The `enableResize` property in EJ2 React has been renamed to `resizable` in React. Specifies whether the `dialog` can be resized by dragging its edges or corners.
Props: `position` `<DialogComponent position={{ X: 'center', Y: 'center' }}></DialogComponent >`	Props: `position` `<Dialog position={{ X: 'center', Y: 'center' }}></Dialog >`	The `position` prop is supported in both EJ2 React and React. It specifies the placement of the dialog on the screen. You can use predefined positions like `'Center'`, `'Top'`, `'Bottom'`, `'Left'`, `'Right'`, or exact pixel coordinates.
Props: `resizeHandles` `<DialogComponent resizeHandles={['All']}></DialogComponent >`	Props: `resizeHandles` `<Dialog resizeHandles={['All']}></Dialog >`	The `resizeHandles` prop is supported in both EJ2 React and React. Specifies which edges or corners of the dialog can be dragged to resize it. Only applies when the resizable is true.
Props: `footerTemplate` `<DialogComponent footerTemplate={footerTemplate}></DialogComponent >`	Props: `footer` `<Dialog footer={footerTemplate}></Dialog >`	The `footerTemplate` property in EJ2 React has been renamed to `footer` in React. It specifies the content to display in the `dialog` footer section. This is typically used for action buttons like "OK", "Cancel", etc.
Props: `header` `<DialogComponent header={headerTemplate}></DialogComponent >`	Props: `header` `<Dialog header={headerTemplate}></Dialog >`	The `header` prop is supported in both EJ2 React and React. Specifies the content to display in the dialog header section. This can be text or any valid React node.
Props: `target` `<DialogComponent target={target}></DialogComponent >`	Props: `target` `<Dialog target={target}></Dialog>`	The `target` prop is supported in both EJ2 React and React. It specifies the element where the `dialog` should be rendered. By default, `dialog` are rendered at the document body, but this prop allows the `dialog` to be rendered within any element.

Methods

EJ2 React	React	Description
Methods: `destroy` `<DialogComponent id="Dialog" ref={(scope) => { this.DialogObj = scope } /> constructor(props: {}) { this.DialogObj.destroy(); }}`	`useEffect(() => { return () => { console.log('destroyed'); }; }, []); <Dialog></Dialog >`	The `destroyed` callback event in EJ2 React is not available in React components. Instead, use the cleanup function returned by React useEffect hook to execute logic on component unmount.

Events

EJ2 React	React	Description
Events: `drag` `<DialogComponent drag={handler} > </DialogComponent>`	Events: `onDrag` `<Dialog onDrag={handler}></Dialog >`	The `drag()` event handler in EJ2 React `Dialog` has been renamed to `onDrag()` in React.
Events: `dragStart` `<DialogComponent dragStart={handler} > </DialogComponent>`	Events: `onDragStart` `<Dialog onDragStart={handler}></Dialog >`	The `dragStart()` event handler in EJ2 React `Dialog` has been renamed to `onDragStart()` in React.
Events: `dragStop` `<DialogComponent dragStop={handler} > </DialogComponent>`	Events: `onDragStop` `<Dialog onDragStop={handler}></Dialog >`	The `dragStop()` event handler in EJ2 React `Dialog` has been renamed to `onDragStop()` in React.
Events: `resizing` `<DialogComponent resizing={handler} > </DialogComponent>`	Events: `onResize` `<Dialog onResize={handler}></Dialog >`	The `resizing()` event handler in EJ2 React `Dialog` has been renamed to `onResize()` in React.
Events: `resizeStart` `<DialogComponent resizeStart={handler} > </DialogComponent>`	Events: `onResizeStart` `<Dialog onResizeStart={handler}></Dialog >`	The `resizeStart()` event handler in EJ2 React `Dialog` has been renamed to `onResizeStart()` in React.
Events: `dragStop` `<DialogComponent dragStop={handler} > </DialogComponent>`	Events: `onResizeStop` `<Dialog onResizeStop={handler}></Dialog >`	The `dragStop()` event handler in EJ2 React `Dialog` has been renamed to `onResizeStop()` in React.
Events: `close` `<DialogComponent close={handler} > </DialogComponent>`	Events: `onClose` `<Dialog onClose={handler}></Dialog >`	The `close()` event handler in EJ2 React `Dialog` has been renamed to `onClose()` in React.