Template in React Message component

28 Feb 202310 minutes to read

The message supports templates that allows the user to customize the content with a custom structure. The content can be a string, paragraph, or any other HTML element. The template can be rendered through the content property or added directly to the HTML element.

In the following sample, the Message component content is customized with HTML elements and React Button components, which are directly added to the HTML element.

import * as React from "react";
import * as ReactDOM from "react-dom";
import { MessageComponent } from '@syncfusion/ej2-react-notifications';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { useState } from 'react';

function App() {
    const [visible, setVisible] = useState(true);
    const [cssClass, setCssClass] = useState('e-outline e-primary e-success msg-hidden');
    const showClick = () => {
        setVisible(true);
        setCssClass('e-outline e-primary e-success msg-hidden');
    };
    const dismissClick = () => {
        setVisible(false);
    };
    const closed = () => {
        setCssClass('e-outline e-primary e-success');
    };
    const contentTemplate = () => {
        return (
            <div>
                <h1>Merged pull request</h1>
                <p>Pull request #41 merged after a successful build</p>
                <ButtonComponent id="commitBtn" cssClass="e-link" content="View commit" />
                <ButtonComponent id="closeBtn" cssClass="e-link" content="Dismiss" onClick={dismissClick.bind(this)} />
            </div>
        );
    };

    return (<div className="msg-template-section">
        <div className="content-section">
        <ButtonComponent id="showBtn" content="Show pull request" cssClass={cssClass} onClick={showClick.bind(this)} />
        <MessageComponent id="msg_template" visible={visible} content={contentTemplate.bind(this)} severity="Success" closed={closed.bind(this)} />
        </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';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { useState } from 'react';

function App() {
    const [visible, setVisible] = useState<boolean>(true);
    const [cssClass, setCssClass] = useState<string>(
        'e-outline e-primary e-success msg-hidden'
    );
    const showClick = () => {
        setVisible(true);
        setCssClass('e-outline e-primary e-success msg-hidden');
    };
    const dismissClick = () => {
        setVisible(false);
    };
    const closed = () => {
        setCssClass('e-outline e-primary e-success');
    };
    const contentTemplate = () => {
        return (
            <div>
                <h1>Merged pull request</h1>
                <p>Pull request #41 merged after a successful build</p>
                <ButtonComponent id="commitBtn" cssClass="e-link" content="View commit" />
                <ButtonComponent id="closeBtn" cssClass="e-link" content="Dismiss" onClick={dismissClick.bind(this)} />
            </div>
        );
    };

  return (
    <div className="msg-template-section">
        <div className="content-section">
        <ButtonComponent id="showBtn" content="Show pull request" cssClass={cssClass} onClick={showClick.bind(this)} />
        <MessageComponent id="msg_template" visible={visible} content={contentTemplate.bind(this)} severity="Success" closed={closed.bind(this)} />
        </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/26.2.4/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/26.2.4/ej2-react-notifications/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/26.2.4/ej2-react-buttons/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-template-section .content-section {
            margin: 0 auto;
            max-width: 450px;
            padding-top: 20px;
        }

        .msg-template-section .e-btn.msg-hidden {
            display: none;
        }

        .msg-template-section .e-message h1 {
            margin: 0;
            font-size: 16px;
            font-weight: 600;
            line-height: 1.25;
        }

        .msg-template-section .e-message .e-msg-icon {
            padding: 0 4px;
            margin-top: 3px;
        }

        .msg-template-section .e-message p {
            margin: 8px 0 4px;
        }

        .msg-template-section .e-message .e-btn {
            padding: 0;
        }
    </style>
</body>

</html>