React Message

The React Message is a graphical user interface component that displays messages with visual severity levels. It differentiates messages with icons and colors to denote the importance and context of the message. It has several built-in features, such as severities, variants, icons, and a template.

Getting started

To create a new Vite project, refer to the Vite documentation. Once that Vite project is ready to run with default settings, let’s add the React Message component to the project.

Installing Syncfusion® React packages

To use the React Message component in this project, the @syncfusion/react-notifications package needs to be installed using the following command:

npm install @syncfusion/react-notifications

Adding CSS reference

In this article, the Material theme is applied using CSS styles, which are available in installed packages. The necessary Material CSS styles for the Message component and its dependents were imported into the src/App.css file.

@import '../node_modules/@syncfusion/react-base/styles/material.css';
@import '../node_modules/@syncfusion/react-notifications/styles/material.css';

Adding Message component

To include the Message component in your application, import the Message from the @syncfusion/react-notifications package in App.tsx.

import { Message } from '@syncfusion/react-notifications';

Add the Message component in application as shown in below code example.

import { Message, Severity } from '@syncfusion/react-notifications';
import './App.css';

export default function App() {
    return (
    <div className="component-section">
        <Message severity={Severity.Success}>Your message has been sent successfully</Message>
    </div>
    );
}

Run the project

To run the project, use the following command:

npm run dev

The following example demonstrates how to create a simple Message component. The Message component is displayed with a success message. The message is displayed with a green background and a check icon at the start of the message, indicating that an action was completed successfully.

Severities

The severity denotes the importance and context of the message to the user. The message contains different severity types. Use the severity property to display the messages with different severity levels.

The available severity types are Normal, Success, Info, Warning, and Error. The default severity type for messages is Normal.

The following example demonstrates the severity of the messages.

Variants

The message has predefined appearance variants for different visual representations. The variants of the message can be changed based on the variant property.

The available variants are Standard, Outlined, and Filled. The default variant type for messages is Standard.

The following examples demonstrate the different variants of the message.

Standard

The severity is differentiated using a text color and a light background color.

Outlined

The severity is differentiated using a text color and a border without a background.

Filled

The severity is differentiated using a text color and a dark background color.

Icons

This section explains the message with no icons, how to show or hide the close icon, and add the custom severity icon to the message.

No icon

By default, severity icons can be displayed according to the severity types to make it more understandable to the user by visual information rather than text. To hide the severity icons, set the icon property to false.

The following example demonstrates the different severity messages without the severity icons.

Close icon

The message can be rendered with or without the close icon. The close icon is used to hide the message, either by manually clicking the close icon or through keyboard interaction.

By default, the close icon is not rendered in the message. To show the close icon, set the closeIcon property to true. You can also customize the close icon by passing a JSX element (such as an SVG) to the closeIcon property.

In the following example, the messages are rendered with the close icon.

Custom icon

By default, severity icons in the Message component are automatically rendered based on the severity type, helping users quickly understand the nature of the message. However, if you want to personalize these icons such as using custom SVG icons to better match your application's design or intent you can easily customize the icons using the icon and closeIcon properties.

• icon: This property allows you to override the default severity icon and render a custom SVG at the beginning of the message content.

• closeIcon: This property lets you provide a custom icon for the close (dismiss) button, giving you complete control over the appearance and interaction design of the message box.

The following example demonstrates how to render a message with fully customized icons:

Actions

The React Message component allows users to interact with messages dynamically using built-in actions. One such action is the onClose event, which is triggered when a message is dismissed using the close icon.

You can use this event to perform additional actions, such as:

• Displaying a confirmation message.

• Updating the UI state upon message dismissal.

• Logging user interactions for tracking purposes.

The following example demonstrates how to handle the onClose event and update the state accordingly.

Customization

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 sf-content-center and sf-content-right.

The following example demonstrates the message with different content alignments.

Appearance

The React Message component allows users to customize the appearance of the message by applying a custom class at the application level. This class enables users to override the default styles to adjust the message appearance.

The following example demonstrates the modified color and border radius of the message component.

Template

The message supports templates that allow 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 added directly to child elements of the Message component. The following example demonstrates how to customize the content using HTML elements.

Accessibility

The Message component followed the accessibility guidelines and standards, including ADA, Section 508, WCAG 2.2 standards, and WCAG roles that are commonly used to evaluate accessibility.

The accessibility compliance for the Message component is outlined below.

- All features of the component meet the requirement.

- Some features of the component do not meet the requirement.

- The component does not meet the requirement.

WAI-ARIA attributes

The Message component followed the WAI-ARIA patterns to meet the accessibility. The following ARIA attributes are used in the Message component:

Keyboard interaction

The Message component followed the keyboard interaction guideline, making it easy for people who use assistive technologies (AT) and those who completely rely on keyboard navigation. The following keyboard shortcuts are supported by the Message component.