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](references/toast-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](references/toast-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](references/toast-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](references/toast-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](references/toast-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](references/toast-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](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](references/toast-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](references/toast-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.* ```tsx 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) ```tsx 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](references/toast-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](references/toast-timeout-and-dismissal.md). #### Action-required toasts Use the `buttons` property to add Ignore/Confirm/Undo buttons — see [references/configuration.md](references/toast-configuration.md). #### Prevent duplicates Use the `beforeOpen` event to cancel duplicate toasts already on screen — see [references/toast-services.md](references/toast-services.md). #### Limit max visible toasts Cap simultaneous toasts at N using `beforeOpen` and `element.childElementCount` — see [references/toast-services.md](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](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](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](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](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 📄 **Read:** [references/message-customization.md](references/message-customization.md) - Content alignment: left (default), center (`e-content-center`), right (`e-content-right`) - Custom appearance with `cssClass` - CSS-only message rendering (no JS, pure HTML + CSS) - Content templates: JSX element or render function via `content` prop - RTL support via `enableRtl` - Persistence with `enablePersistence` #### Accessibility 📄 **Read:** [references/message-accessibility.md](references/message-accessibility.md) - WCAG 2.2, Section 508, ADA compliance - WAI-ARIA attributes (`role=alert`, `aria-label`) - Keyboard navigation (Tab, Enter/Space) - Screen reader support #### API Reference 📄 **Read:** [references/message-api.md](references/message-api.md) - All properties with types, defaults, and descriptions - Methods: `destroy`, `getPersistData` - Events: `closed`, `created`, `destroyed` - `MessageCloseEventArgs` interface - `Severity` and `Variant` enum values --- ### Quick Start > 🛑 *STOP — Do not start the dev server autonomously. Ask the user to run: `npm run dev` after setup.* ```bash npm install @syncfusion/ej2-react-notifications@33.x.x --save npm audit ``` ```css /* src/App.css */ @import '../node_modules/@syncfusion/ej2-base/styles/tailwind3.css'; @import '../node_modules/@syncfusion/ej2-react-notifications/styles/tailwind3.css'; ``` ```tsx import { MessageComponent } from '@syncfusion/ej2-react-notifications'; import './App.css'; function App() { return ( <MessageComponent content="Please read the comments carefully" /> ); } export default App; ``` --- ### Common Patterns #### Severity Messages ```tsx <MessageComponent content="Editing is restricted" /> <MessageComponent content="Operation completed" severity="Success" /> <MessageComponent content="Read these notes" severity="Info" /> <MessageComponent content="Check your connection" severity="Warning" /> <MessageComponent content="Submission failed" severity="Error" /> ``` #### Variant + Severity Combo ```tsx <MessageComponent content="Editing is restricted" variant="Filled" /> <MessageComponent content="Operation completed" severity="Success" variant="Outlined" /> <MessageComponent content="Submission failed" severity="Error" variant="Filled" /> ``` #### Dismissible Message ```tsx import { useState } from 'react'; function App() { const [visible, setVisible] = useState(true); return ( <MessageComponent content="Your session will expire soon" severity="Warning" showCloseIcon={true} visible={visible} closed={() => setVisible(false)} /> ); } ``` #### Content Template ```tsx const contentTemplate = () => ( <div> <h4>Build succeeded</h4> <p>All 42 tests passed.</p> </div> ); <MessageComponent content={contentTemplate} severity="Success" /> ``` --- ## Skeleton The Syncfusion React `SkeletonComponent` renders animated placeholder shapes that mimic the layout of loading content. It reduces perceived load time and communicates progress to users with configurable shapes, shimmer animations, and full accessibility support. **Package:** `@syncfusion/ej2-react-notifications` > 🛑 **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/skeleton-getting-started.md](references/skeleton-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 theme imports (tailwind3) - Minimal `SkeletonComponent` setup with `height` and `width` - Running the Vite/React app #### Shapes 📄 **Read:** [references/skeleton-shapes.md](references/skeleton-shapes.md) - `shape` prop: `"Circle"`, `"Square"`, `"Rectangle"`, `"Text"` (default) - Dimension rules: width required for Circle/Square; width + height for Rectangle/Text - Building multi-shape card skeleton layouts - Choosing the right shape for avatar, image, text, and icon placeholders #### Shimmer Effects 📄 **Read:** [references/skeleton-shimmer-effect.md](references/skeleton-shimmer-effect.md) - `shimmerEffect` prop: `"Wave"` (default), `"Pulse"`, `"Fade"` - Visual behavior of each effect type - List skeleton example with Pulse effect - Selecting an effect to match UI context #### Styles and Visibility 📄 **Read:** [references/skeleton-styles.md](references/skeleton-styles.md) - `cssClass` prop for custom CSS overrides (wave color, background, animation speed) - `visible` prop to toggle skeleton on/off based on loading state - Transition pattern: skeleton → actual content - CSS variable customization #### Accessibility 📄 **Read:** [references/skeleton-accessibility.md](references/skeleton-accessibility.md) - WCAG 2.2, Section 508, ADA compliance