Customization in React Message component

28 Feb 202322 minutes to read

The Message component allows the user to customize the content display positions and appearance. This section explains the details about changing the content alignments and border styles for messages.

Content Alignment

Normally, the message content is aligned to the left. The Message component allows the user to align the message content in the center or right through the built-in classes e-content-center and e-content-right.

The following example demonstrates the message with different content alignments.

index.jsx
index.tsx
index.html
import * as React from "react";
import * as ReactDOM from "react-dom";
import { MessageComponent } from '@syncfusion/ej2-react-notifications';
function App() {
    return (<div className="msg-custom-section">
        <div className="content-section">
            <h4>Content Alignment</h4>
            <MessageComponent id="msg_content_left" content="Your license has been activated successfully" severity="Success"></MessageComponent>
            <MessageComponent id="msg_content_center" content="The license will expire today" cssClass="e-content-center" severity="Warning"></MessageComponent>
            <MessageComponent id="msg_content_right" content="The license key is invalid" cssClass="e-content-right" severity="Error"></MessageComponent>
        </div>
    </div>);
}
export default App;
const root = ReactDOM.createRoot(document.getElementById('sample'));
root.render(<App />);
import * as React from "react";
import * as ReactDOM from "react-dom";
import { MessageComponent } from '@syncfusion/ej2-react-notifications';

function App() {
  return (
      <div className="msg-custom-section">
        <div className="content-section">
            <h4>Content Alignment</h4>
            <MessageComponent id="msg_content_left" content="Your license has been activated successfully" severity="Success"></MessageComponent>
            <MessageComponent id="msg_content_center" content="The license will expire today" cssClass="e-content-center" severity="Warning"></MessageComponent>
            <MessageComponent id="msg_content_right" content="The license key is invalid" cssClass="e-content-right" severity="Error"></MessageComponent>
        </div>
    </div>
  );
}
export default App;
const root = ReactDOM.createRoot(document.getElementById('sample'));
root.render(<App />);
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion React Message</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-react-notifications/styles/material.css" rel="stylesheet" />
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    <div id='sample'>
        <div id='loader'>Loading....</div>
    </div>
    <style>
        /* Sample level styles */
        #loader {
            color: #008cff;
            height: 40px;
            left: 45%;
            position: absolute;
            top: 45%;
            width: 30%;
        }

        .msg-custom-section .content-section {
            margin: 0 auto;
            max-width: 400px;
            padding-top: 10px;
        }

        .msg-custom-section .e-message {
            margin: 10px 0;
        }
    </style>
</body>

</html>

Rounded and Square

To customize the Message component’s appearance, add the custom class to the message through the cssClass property. This custom class will be added to the root element. Based on this custom class, the user can override the message styles at the application level.

The following example shows the rounded and squared appearance of the message, which can be achieved by adding the cssClass property.

index.jsx
index.tsx
index.html
import * as React from "react";
import * as ReactDOM from "react-dom";
import { MessageComponent } from '@syncfusion/ej2-react-notifications';
function App() {
    return (<div className="msg-custom-section">
        <div className="content-section">
            <h4>Rounded</h4>
            <MessageComponent content="The license will expire today" cssClass="rounded" severity="Warning"></MessageComponent>
            <h4>Square</h4>
            <MessageComponent content="The license key is invalid" cssClass="square" severity="Error"></MessageComponent>
        </div>
    </div>);
}
export default App;
const root = ReactDOM.createRoot(document.getElementById('sample'));
root.render(<App />);
import * as React from "react";
import * as ReactDOM from "react-dom";
import { MessageComponent } from '@syncfusion/ej2-react-notifications';

function App() {
  return (
      <div className="msg-custom-section">
        <div className="content-section">
            <h4>Rounded</h4>
            <MessageComponent content="The license will expire today" cssClass="rounded" severity="Warning"></MessageComponent>
            <h4>Square</h4>
            <MessageComponent content="The license key is invalid" cssClass="square" severity="Error"></MessageComponent>
        </div>
    </div>
  );
}
export default App;
const root = ReactDOM.createRoot(document.getElementById('sample'));
root.render(<App />);
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion React Message</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-react-notifications/styles/material.css" rel="stylesheet" />
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    <div id='sample'>
        <div id='loader'>Loading....</div>
    </div>
    <style>
        /* Sample level styles */
        #loader {
            color: #008cff;
            height: 40px;
            left: 45%;
            position: absolute;
            top: 45%;
            width: 30%;
        }

        .msg-custom-section .content-section {
            margin: 0 auto;
            max-width: 400px;
            padding-top: 10px;
        }

        .msg-custom-section .e-message {
            margin: 10px 0;
        }

        .msg-custom-section .e-message.rounded {
            border-radius: 5px;
        }

        .msg-custom-section .e-message.square {
            border-radius: 1px;
        }
    </style>
</body>

</html>

CSS Message

The Essential JS 2 Message has predefined CSS classes that can be defined in the HTML elements, which renders the message without any script reference. This can display a simple message with content and make the code lighter.

The following DOM structure is required to display the simple message with the content.

<div class="e-message">
    <div class="e-msg-content">..content..</div>
</div>

The following DOM structure is required to display the simple message with the content and severity icon.

<div class="e-message">
    <span class="e-msg-icon"></span>
    <div class="e-msg-content">..content..</div>
</div>

The following is the available list of predefined CSS classes to make the appearance of a message.

Class	Description
e-message	Represents the message wrapper.
e-msg-icon	Represents the severity type icon.
e-msg-content	Represents the message content.
e-msg-close-icon	Represents the close icon.
e-info	Represents the information message.
e-success	Represents the success message.
e-warning	Represents the warning message.
e-error	Represents the error message.
e-content-center	Aligns the message content to the center.
e-content-right	Aligns the message content to the right.

The following example shows the message which renders without any script reference.

index.jsx
index.tsx
index.html
import * as React from "react";
import * as ReactDOM from "react-dom";
function App() {
    return (<div class="msg-default-section">
        <div class="content-section">
            <div id="msg-default" class="e-message" role="alert">
                <span class="e-msg-icon"></span>
                <div class="e-msg-content">Editing is restricted</div>
            </div>
            <div id="msg-info" class="e-message e-info" role="alert">
                <span class="e-msg-icon"></span>
                <div class="e-msg-content">Please read the comments carefully</div>
            </div>
            <div id="msg-success" class="e-message e-success" role="alert">
                <span class="e-msg-icon"></span>
                <div class="e-msg-content">Your message has been sent successfully</div>
            </div>
            <div id="msg-warning" class="e-message e-warning" role="alert">
                <span class="e-msg-icon"></span>
                <div class="e-msg-content">There was a problem with your network connection</div>
            </div>
            <div id="msg-error" class="e-message e-error" role="alert">
                <span class="e-msg-icon"></span>
                <div class="e-msg-content">A problem occurred while submitting your data</div>
            </div>
        </div>
    </div>);
}
export default App;
const root = ReactDOM.createRoot(document.getElementById('sample'));
root.render(<App />);
import * as React from "react";
import * as ReactDOM from "react-dom";
import { MessageComponent } from '@syncfusion/ej2-react-notifications';

function App() {
  return (
      <div class="msg-default-section">
        <div class="content-section">
            <div id="msg-default" class="e-message" role="alert">
                <span class="e-msg-icon"></span>
                <div class="e-msg-content">Editing is restricted</div>
            </div>
            <div id="msg-info" class="e-message e-info" role="alert">
                <span class="e-msg-icon"></span>
                <div class="e-msg-content">Please read the comments carefully</div>
            </div>
            <div id="msg-success" class="e-message e-success" role="alert">
                <span class="e-msg-icon"></span>
                <div class="e-msg-content">Your message has been sent successfully</div>
            </div>
            <div id="msg-warning" class="e-message e-warning" role="alert">
                <span class="e-msg-icon"></span>
                <div class="e-msg-content">There was a problem with your network connection</div>
            </div>
            <div id="msg-error" class="e-message e-error" role="alert">
                <span class="e-msg-icon"></span>
                <div class="e-msg-content">A problem occurred while submitting your data</div>
            </div>
        </div>
    </div>
  );
}
export default App;
const root = ReactDOM.createRoot(document.getElementById('sample'));
root.render(<App />);
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion React Message</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-react-notifications/styles/material.css" rel="stylesheet" />
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    <div id='sample'>
        <div id='loader'>Loading....</div>
    </div>
    <style>
        /* Sample level styles */
        #loader {
            color: #008cff;
            height: 40px;
            left: 45%;
            position: absolute;
            top: 45%;
            width: 30%;
        }

        .msg-default-section .content-section {
            margin: 0 auto;
            max-width: 450px;
            padding-top: 10px;
        }

        .msg-default-section .e-message {
            margin: 10px 0;
        }
    </style>
</body>

</html>