React Migration in Toast Component

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

Properties

EJ2 React	React	Description
Props: `content` `<ToastComponent content="Show button clicked" />`	Props: `content` `<Toast content={"Show button clicked"}> </Toast>`	The `content` prop is supported in both EJ2 React and React.
Props: `cssClass` `<ToastComponent cssClass="my-toast" content="Show button clicked" />`	Props: `className` `<Toast className="my-toast" content="Show button clicked" />`	The `cssClass` prop in EJ2 React is replaced with the standard React `className` prop in React.
Props: `position` `<ToastComponent content={'The file is corrupted'} position={{ X: 'Center', Y: 'Top' }}>`	Props: `position` `<Toast content={'The file is corrupted'} position={{ X: 'Center', Y: 'Top' }} >`	The `position` prop is supported in both EJ2 React and React.
Props: `buttons` `<ToastComponent content={'The file is corrupted'} buttons={[ { model: { content: "Ignore" } }, { model: { content: "reply" } } ]} >`	Props: `buttons` `<Toast content={'The file is corrupted'} buttons={[ { model: { content: "Ignore" } }, { model: { content: "reply" } } ]} >`	The `buttons` prop is supported in both EJ2 React and React.
Props: `extendedTimeout` `<ToastComponent cssClass="my-toast" content="Show button clicked" extendedTimeout={1000} />`	Props: `extendedTimeout` `<Toast className="my-toast" content="Show button clicked" extendedTimeout={1000}/>`	The `extendedTimeout` prop is supported in both EJ2 React and React.
Props: `timeOut` `<ButtonComponent onClick={this.toastInstance.show({ timeOut: 1000 })}> Show Toast </ButtonComponent> <ToastComponent ref={toast => this.toastInstance = toast} content="Show button clicked" />`	Props: `timeOut` `<Toast className="my-toast" content="Show button clicked" timeOut ={1000}/>`	In EJ2 React, Toast requires a reference and explicit `show` method call with timeout configuration, while React simplifies this with a declarative approach by directly providing the `timeout` property to the component.
Props: `newestOnTop` `<ToastComponent newestOnTop={true} content="Show button clicked" />`	Props: `newestOnTop` `<Toast className="my-toast" newestOnTop={true} content="Show button clicked" />`	The `newestOnTop` prop is supported in both EJ2 React and React.
Props: `showProgressBar` `<ToastComponent showProgressBar={true} content="Show button clicked" />`	Props: `progressBar` `<Toast className="my-toast" progressBar={true} content="Show button clicked" />`	In EJ2 React, the progress bar is controlled using the `showProgressBar` property, while in React it's simplified to just `progressBar` for a more concise API.Both implementations provide the same progress bar functionality, but React renames the property for better consistency with other component APIs.

Methods

EJ2 React	React	Description
Methods: `show()` `<ToastComponent id="Toast" shape= 'Circle' ref={(scope) => { this.ToastObj = scope } /> constructor(props: {}) { this.ToastObj.show(); }}`	`<ButtonComponent onClick={this.toastInstance.show()}> Show Toast </ButtonComponent> <Toast ref={toast => this.toastInstance = toast} content="Show button clicked" />`	The `show()` method is supported in both EJ2 React and React.
Methods: `hide()` `<ToastComponent id="Toast" shape= 'Circle' ref={(scope) => { this.ToastObj = scope } /> constructor(props: {}) { this.ToastObj.hide(); }}`	`<ButtonComponent onClick={this.toastInstance.hide()}> Show Toast </ButtonComponent> <Toast ref={toast => this.toastInstance = toast} content="Show button clicked" />`	The `hide()` method is supported in both EJ2 React and React.
Methods: `destroy()` `<ToastComponent id="Toast" shape= 'Circle' ref={(scope) => { this.ToastObj = scope } /> constructor(props: {}) { this.ToastObj.destroy(); }}`	`useEffect(() => { return () => { console.log('destroyed'); }; }, []); <Toast variant={Variants.Circle}></Toast>`	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
Event: `click` `<ToastComponent click={(e) => handleClose(e)}></ToastComponent>`	Event: `onClick` `<Toast onClick={(e) => handleClose(e)}></Toast>`	The `click` event in EJ2 React is replaced with the `onClick` event in React, following React's standard event naming convention.
Event: `close` `<ToastComponent close={(e) => handleClose(e)}></ToastComponent>`	Event: `onClose` `<Toast onClose={(e) => handleClose(e)}></Toast>`	The `close` event in EJ2 React is replaced with the `onClose` event in React, following React's standard event naming convention.
Event: `open` `<ToastComponent open={(e) => handleClose(e)}></ToastComponent>`	Event: `onOpen` `<Toast onOpen={(e) => handleClose(e)}></Toast>`	The `open` event in EJ2 React is replaced with the `onOpen` event in React, following React's standard event naming convention.
Events: `destroyed` `<ToastComponent destroyed={() => console.log('destroyed')}></ToastComponent>`	`useEffect(() => { return () => { console.log('destroyed'); }; }, []); <Toast className="my-toast" progressBar={true} content="Show button clicked" />`	The `destroyed` callback prop in EJ2 React is not available in React components. Instead, use the cleanup function returned by React’s `useEffect` hook to execute login on component unmount.