Toast

Usage

Simple Usage

For simple usage, AutoToast can be used directly. It is a pre-assembled, simplified version of the Toast that handles common use cases.

import { AutoToast } from "@govtechmy/myds-react/toast";
 
// Put the component high up in the DOM tree
<AutoToast />;

// Then, publish or emit a new event to the Toast
import { useToast } from "@govtechmy/myds-react/hooks";
 
export default () => {
  const { toast } = useToast();
  return (
    <button
      onClick={() => {
        toast({
          variant: "message",
          title: "Hello, world!",
          description: "this is a message toast description",
        });
      }}
    >
      Message
    </button>
  );
};

Advanced Usage

Instead of using AutoToast, the Toast component can be assembled manually for more control.

import {
  ToastRoot,
  ToastIcon,
  ToastProgress,
  ToastProvider,
  ToastViewport,
  ToastTitle,
  ToastDescription,
} from "@govtechmy/myds-react/toast";
 
export default () => (
  <ToastProvider>
    {toasts.map((toast, index) => (
      <ToastRoot
        key={props.id || index}
        variant={toast.variant || "message"}
        {...props}
      >
        <ToastIcon />
        <div className="space-y-1">
          <ToastTitle>{toast.title}</ToastTitle>
          {toast.description && (
            <ToastDescription>{toast.description}</ToastDescription>
          )}
        </div>
        <ToastClose />
        <ToastProgress />
      </ToastRoot>
    ))}
 
    <ToastViewport />
  </ToastProvider>
);

Examples

Variant

5 variants of toast are availablle: message, info, success, warning and error. The examples of use cases are:

1. success variant can be used to indicates a successful action such as creating a new request or submitting a form.
2. warning variant can alert the users to take notice, often used for reminders or actions that require attention, such as reporting spam.
3. information variant can provides additional details to keep user informed.
4. error variant can be used to notify the user of an error that requires resolution before proceeding.

Props

ToastProvider

ToastProvider is abstracted from Radix UI's ToastProvider. Please refer to the API references in this documentation.

ToastViewport

ToastViewport is abstracted from Radix UI's ToastViewport. Please refer to the API references in this documentation.

ToastRoot

ToastRoot is abstracted from Radix UI's ToastRoot. Please refer to the API references in this documentation.

ToastTitle

ToastTitle is abstracted from Radix UI's ToastTitle. Please refer to the API references in this documentation.

ToastDescription

ToastDescription is abstracted from Radix UI's ToastDescription. Please refer to the API references in this documentation.

ToastClose

ToastClose is abstracted from Radix UI's ToastClose. Please refer to the API references in this documentation.