React Migration in Message Component

This section explains how to migrate the Message 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` `<MessageComponent content="Success!"></MessageComponent>`	Props: `children` `<Message>Success!</Message>`	The `content` prop in EJ2 React is replaced in React by directly passing content as `children` to the Message component.
Props: `cssClass` `<MessageComponent cssClass="custom-message"></MessageComponent>`	Props: `className` `<Message className="custom-message"></Message>`	The `cssClass` prop in EJ2 React is replaced with the standard React `className` prop in React.
Props: `severity` `<MessageComponent severity="Success"></MessageComponent>`	Props: `severity` `<Message severity={Severity.Success}></Message>`	The `severity` prop in EJ2 React accepts both string and enum values (e.g., "Success" or Severity.Success). In React, the `severity` prop supports only enum values from the `Severity` enum (e.g., Severity.Success, Severity.Error).
Props: `variant` `<MessageComponent variant="text"></MessageComponent>`	Props: `variant` `<Message variant={Variant.Text}></Message>`	The `variant` prop in EJ2 React accepts both string and enum values (e.g., "text" or Variant.Text). In React, the `variant` prop supports only enum values from the `Variant` enum (e.g., Variant.Text, Variant.Outlined).
Props: `showIcon` `<MessageComponent showIcon={true}></MessageComponent>`	Props: `icon` `<Message icon={true}></Message>`	The `showIcon` prop in EJ2 React is replaced with the `icon` prop in React, which also supports rendering a custom SVG icon.
Props: `visible` `<MessageComponent visible={true}></MessageComponent>`	Props: `visible` `<Message visible={true}></Message>`	The `visible` prop is supported in both EJ2 React and React. In React, you can also use standard React conditional rendering as an alternative approach.
Props: `showCloseIcon` `<MessageComponent showCloseIcon={true}></MessageComponent>`	Props: `closeIcon` `<Message closeIcon={true}></Message>`	The `showCloseIcon` prop in EJ2 React is replaced with the `closeIcon` prop in React, which also supports rendering a custom SVG icon.
Props: `enableRtl` `<MessageComponent enableRtl={true}></MessageComponent>`	`<Provider dir={'rtl'}> <Message closeIcon={true}></Message> <Provider>`	The `enableRtl` prop in EJ2 React is replaced in React by wrapping the component with a `Provider` that includes the `dir="rtl"` attribute to enable RTL support.
Props: `locale` `<MessageComponent locale='en-US'></MessageComponent>`	`<Provider locale={'en-US'}> <Message closeIcon={true}></Message> <Provider>`	The `locale` prop in EJ2 React is replaced in React by wrapping the component with a `Provider` that includes the `locale="en-US"` attribute to apply the locale.

Methods

EJ2 React	React	Description
Methods: `destroy` `<MessageComponent id="msg" content="Message" ref={(scope) => { this.msgObj = scope } /> constructor(props: {}) { this.msgObj.destroy(); }}`	`const [showMessage, setShowMessage] = useState(true); <> <Button onClick={ () => setShowMessage(!showMessage) }> {showMessage ? 'Hide' : 'Show'} Message </Button> {showMessage && <Message>Success</Message>} </>`	In EJ2 React, `destroy()` is called manually to remove the component and free resources. In React, conditional rendering unmounts the component, and React handles cleanup automatically no manual destroy needed.

Events

EJ2 React	React	Description
Events: `closed` `<MessageComponent closed={(e) => handleClose(e)}></MessageComponent>`	Events: `onClose` `<Message onClose={(e) => handleClose(e)}></Message>`	The `closed` event in EJ2 React is replaced with the `onClose` event in React, following React's standard event naming convention.
Events: `created` `<MessageComponent created={() => console.log('created')}></MessageComponent>`	`useEffect(() => { console.log('created'); }, []); <Message>Success!</Message>`	The `created` callback prop in EJ2 React is not available in React components. Instead, use React’s `useEffect` hook to execute logic on component mount.
Events: `destroyed` `<MessageComponent created={() => console.log('destroyed')}></MessageComponent>`	`useEffect(() => { return () => { console.log('destroyed'); }; }, []); <Message>Success!</Message>`	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.