Syncfusion React Notifications

Implementing Syncfusion React Notifications

Toast

The Syncfusion React Toast component displays brief, non-intrusive notifications that auto-dismiss after a configurable timeout. Toasts support rich content through templates, action buttons, animated entry/exit, precise positioning, and programmatic control via ToastUtility.

🛑 Agentic use: Do not execute multiple steps autonomously. Confirm with the user before each action (install, run, file creation).

Package and Setup

📄 Read: references/getting-started.md

• Installing @syncfusion/ej2-react-notifications 🛑 STOP — Do not install packages autonomously. Ask the user to run: `npm install @syncfusion/ej2-react-notifications@33.x.x --save`. Verify with `npm audit`
• CSS imports for all required themes
• Basic ToastComponent usage (class and functional patterns)
• Rendering toast in a custom target container
• Triggering show in the created event

Documentation and Navigation Guide

Configuration and Layout

📄 Read: references/configuration.md

• Setting title and content (plain text, HTML, elements)
• Custom target container for scoped notifications
• showCloseButton for manual dismissal
• showProgressBar and progressDirection (Ltr / Rtl)
• newestOnTop stacking order
• width and height dimensions (px, %, auto)

Positioning

📄 Read: references/position.md

• Nine predefined X/Y positions (Left, Center, Right / Top, Bottom)
• Custom pixel and percentage coordinates
• Targeting a container element for relative positioning
• Multiple Toast instances at different screen positions

Timeout and Dismissal

📄 Read: references/timeout-and-dismissal.md

• timeOut property (default 5000 ms)
• extendedTimeout on hover (default 1000 ms)
• Static persistent toasts with timeOut: 0
• Click-to-close via clickToClose in the click event
• Preventing mobile swipe dismissal with beforeClose

Templates and Styling

📄 Read: references/templates-and-styling.md

• template property with HTML strings and DOM selectors
• Dynamic templates passed at show() call time
• Semantic CSS classes: e-toast-success, e-toast-info, e-toast-warning, e-toast-danger
• CSS selectors for title, content, icon, and background customization

Animation

📄 Read: references/animation.md

• animation property with show and hide effect settings
• Available effects: FadeIn, FadeZoomIn, SlideBottomIn, ZoomIn, FlipLeftUpIn, and more
• Default: FadeIn / FadeOut
• Accessibility: reduced-motion considerations

Toast Services and Advanced Patterns

📄 Read: references/toast-services.md

• ToastUtility.show() for quick toasts without component instantiation
• Four predefined types: Information, Success, Error, Warning
• Passing a full ToastModel to ToastUtility.show()
• Playing audio on beforeOpen
• Restricting maximum simultaneous toasts with beforeOpen
• Preventing duplicate toasts using beforeOpen + close

Accessibility

📄 Read: references/accessibility.md

• WAI-ARIA: role="alert", aria-live="assertive", aria-label
• WCAG 2.2, Section 508, ADA compliance
• Screen reader support (JAWS, NVDA, VoiceOver)
• RTL support via enableRtl
• Mobile and accessibility checker validation

API Reference

📄 Read: references/api.md

• All properties with types, defaults, and descriptions
• show() and hide() method signatures
• All events: beforeOpen, open, click, beforeClose, close, created, destroyed, beforeSanitizeHtml

Quick Start Example

🛑 STOP — Do not start the dev server autonomously. Ask the user to run: `npm run dev` after setup.

import { ToastComponent } from '@syncfusion/ej2-react-notifications';
import '@syncfusion/ej2-base/styles/tailwind3.css';
import '@syncfusion/ej2-react-notifications/styles/tailwind3.css';
import { useRef } from 'react';

function App() {
  const toastRef = useRef<ToastComponent>(null);

  return (
    <>
      <button onClick={() => toastRef.current?.show()}>Show Toast</button>
      <ToastComponent
        ref={toastRef}
        title="Success!"
        content="Your changes have been saved."
        cssClass="e-toast-success"
        position={{ X: 'Right', Y: 'Bottom' }}
        timeOut={4000}
        showProgressBar={true}
        showCloseButton={true}
      />
    </>
  );
}

Quick Utility Toast (No Component Needed)

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

// Show a success toast instantly
ToastUtility.show('File saved successfully', 'Success', 3000);

// Show an error toast
ToastUtility.show('Connection failed', 'Error', 5000);

Common Patterns

Semantic type toasts

Use cssClass with e-toast-success, e-toast-info, e-toast-warning, e-toast-danger for visual differentiation — see references/templates-and-styling.md.

Static/persistent toasts

Set timeOut: 0 with showCloseButton: true for notifications users must explicitly dismiss — see references/timeout-and-dismissal.md.

Action-required toasts

Use the buttons property to add Ignore/Confirm/Undo buttons — see references/configuration.md.

Prevent duplicates

Use the beforeOpen event to cancel duplicate toasts already on screen — see references/toast-services.md.

Limit max visible toasts

Cap simultaneous toasts at N using beforeOpen and element.childElementCount — see references/toast-services.md.

Message

The Syncfusion MessageComponent displays contextual messages with visual severity indicators—icons and colors—to communicate importance and context to end users. It supports five severity levels, three visual variants, close-icon dismissal, custom templates, and full accessibility compliance.

🛑 Agentic use: Do not execute multiple steps autonomously. Confirm with the user before each action (install, run, file creation).

Navigation Guide

Getting Started

📄 Read: references/message-getting-started.md

• Installation of @syncfusion/ej2-react-notifications 🛑 STOP — Do not install packages autonomously. Ask the user to run: `npm install @syncfusion/ej2-react-notifications@33.x.x --save`. Verify with `npm audit`
• CSS imports and theme configuration
• Rendering the first MessageComponent
• Content via content prop or JSX children
• Running the Vite development server

Severity Levels

📄 Read: references/message-severities.md

• Five severity levels: Normal, Success, Info, Warning, Error
• severity prop usage and valid values
• Visual distinctions (icons and colors per severity)
• Choosing the right severity for your use case

Display Variants

📄 Read: references/message-variants.md

• Three variants: Text (default), Outlined, Filled
• variant prop usage
• Combining variant with severity
• Visual trade-offs and when to use each

Icons and Close Icon

📄 Read: references/message-icons-and-close.md

• Severity icon visibility: showIcon prop (default true)
• Disabling severity icons
• Custom severity icons via cssClass CSS overrides
• Close icon: showCloseIcon prop (default false)
• closed event handler for dismiss callbacks
• Toggling visibility with the visible prop

Customization and Templates