useToast

Usage

import { useToast } from "@govtechmy/myds-react/hooks";
 
const { toast } = useToast();
 
const handleClick = () => {
  toast({
    variant: "message",
    title: "Hello, world!",
    description: "This is a description",
  });
};

Source

Important

Make sure your <AutoToast /> or a self-assembled Toast component is defined anywhere in your application to display toast notifications.

Example

Trigger a Toast Event

A toast event can be triggered by calling the toast method from the useToast hook. Define a ToastEvent object with the required properties and pass it to the toast method.

Example

import { useToast } from "@govtechmy/myds-react/hooks";
 
//... inside your component
const { toast } = useToast();
 
// For default message toast.
// Experiment with different variants: "success" | "info" | "warning" | "error"
toast({
  variant: "message",
  title: "Hello, world!",
  description: "This is a description",
});

Building a Self Assembled Toast Component

The useToast hook provides the handlers required to listen to toast events from anywhere inside your application. This can be achieved through the subscribe and unsubscribe handlers and can be seen in the Advanced Usage of the Toast documentation.

Toast.tsx

import { useEffect } from "react";
import { useToast } from "@govtechmy/myds-react/hooks";
 
//... inside your component
const { subscribe, unsubscribe } = useToast();
 
useEffect(() => {
  subscribe(); // Run once to subscribe to toast events
  return () => {
    unsubscribe(); // On unmount, unsubscribe from toast events
  };
}, []);

Accessing Active Toasts

Toasts can be accessed through the toasts object provided by the useToast hook. This object contains an array of active toast events.

Example

import { useToast } from "@govtechmy/myds-react/hooks";
 
const { toasts } = useToast();
console.log(toasts);

API

useTheme

Prop	Type	Default
`toast`	`(props: ToastEvent) => void`	-
`toasts`	`ToastEvent[]`	-
`subscribe`	`() => void`	-
`unsubscribe`	`() => void`	-

MYDS

useToast

Usage

Example

Trigger a Toast Event

Building a Self Assembled Toast Component

Accessing Active Toasts

API

useTheme

On this page