Toast

A Toast a non-disruptive message that appears on top of the interface to provide quick and short feedback on the outcome of an action.

Use Toast to convey general confirmation for actions that aren’t critical. For example, you might show a toast message to inform the customer that their recent action was successful.

Access the Toast API with the useToast hook.

interface Toast {
  create: (options: {
    message: string;
    type?: "info" | "success" | "warning" | "error";
    position?: "top-left" | "top-center" | "top-right" | "bottom-left" | "bottom-center" | "bottom-right";
    /**
     * Duration to show toast for, in ms
     * @default 8000
     */
    duration?: number;
    className?: string;
    id?: string;
    style?: React.CSSProperties;
  }) => {
    id: String;
    /** Dismiss the toast (plays exit animation) */
    dismiss: () => void;
    /** Remove the toast (immediate without animation) */
    remove: () => void;
  };
  /** Dismiss all toasts (plays exit animation) */
  dismissAll(): void;
  /** Remove all toasts (immediate without animation) */
  removeAll(): void;
}

Example

import { useToast } from "@instantcommerce/sdk";

const { create } = useToast();

create({
  message: "This is a toast 🍞",
  position: "top-left",
  duration: Infinity,
});