React Toast

The Toast component offers a seamless way to notify users without disrupting their workflow, appearing briefly before disappearing automatically.

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 Toast component to the project.

Installing Syncfusion® React packages

To use the Toast component, install the @syncfusion/react-notifications package:

npm install @syncfusion/react-notifications

Adding CSS reference

Import the Toast component’s required CSS references as follows in src/App.css.

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

Adding Toast component

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

import { Toast } from "@syncfusion/react-notifications";

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

import { Button, Color } from "@syncfusion/react-buttons";
import { Toast } from "@syncfusion/react-notifications";
import { useState } from "react";
import './App.css';

export default function App() {
    const [isToastVisible, setIsToastVisible] = useState(false);
    const toggleToast: () => void = () => {
        if (isToastVisible) {
            setIsToastVisible(false);
        } else {
            setIsToastVisible(true);
        }
    };
    return (
        <>
            <div className="component-section">
                <Button toggleable={true} onClick={toggleToast} color={Color.Secondary}>
                    {isToastVisible ? 'Hide' : 'Show'}
                </Button>
            </div>
            <Toast
                open={isToastVisible}
                content={"Show button clicked"}
                position={{ xAxis: 'Right', yAxis: 'Top' }}
                timeout={3000}
                onClose={() => setIsToastVisible(false)}
            >
            </Toast>
        </>
    );
};

Run the project

To run the project, use the following command:

npm run dev

This demonstration showcases a Toast component that is triggered by a toggle button through the use of the open property when clicked. Additionally, the toast's progress bar is displayed by setting the progressBar property to true.

Types

The Toast component offers a complete range of predefined notification types that effectively convey messages to users both visually and semantically: Success, Error, Warning, and Info.

Action Toast

The actionToast sample demonstrates how to add interactive buttons to a Toast notification using the actions property. This allows you to create confirmation dialogs that prompt users for a response, such as 'Undo' or 'Confirm', and execute specific logic based on their choice.

Multiple

The Multiple sample demonstrates how to dynamically update multiple notifications to reflect the real-time status of a task, like a file upload.

Toast placement

The Toast component provides versatile positioning options for notifications, including corner positions (Left-Top, Right-Top, Left-Bottom, Right-Bottom) and centered positions (Center-Top, Center-Bottom) to enhance your application's layout and user experience.

Templates

The Toast component supports custom content templates and offers a variety of animation effects to create a more engaging user experience.

Accessibility

The Toast 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 Toast 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 Toast component followed the WAI-ARIA patterns to meet the accessibility. The following ARIA attributes are used in the Toast component: