toast

Use toast to tell the customer something happened, such as "Added to your cart", without interrupting them. For content that needs a decision, use Modal.

ExampleCopy Anchor Link

import { toast } from '@salla.sa/twilight-theme-engine/toast';

export async function addToCart(productId: number) {
  return toast.promise(window.salla!.cart.addItem(productId), {
    loading: 'Adding...',
    success: 'Added to your cart',
    error: 'Could not add this product',
  });
}

toast is a plain function, not a React hook, so you can call it anywhere in the browser. The example reads the SDK from window.salla, which exists once the page runs in the browser, so call addToCart from an event handler. useToast is exported too and is the same function.

APICopy Anchor Link

toast(title: string, options?: ToastOptions): string | number;
toast.success | error | warning | info | loading(title, options?): string | number;
toast.dismiss(id?: string | number): void;
toast.update(id: string | number, options: { type?: ToastType; title?: string } & ToastOptions): void;
toast.promise<T>(promise: Promise<T>, options: ToastPromiseOptions<T>): Promise<T>;

Each call returns the toast's id, which you can pass to toast.dismiss or toast.update. toast.update(id, { type, title }) replaces the toast in place, for example a loading toast that becomes a success. Leave out title to keep the current one. Passing { id } to a variant does the same: toast.success('Saved', { id }).

The ToasterCopy Anchor Link

Toaster draws the toasts. The engine's TwilightProvider already mounts it, so a theme normally never renders one. Tune it through the provider instead:

The same last two options are props of Toaster itself (mobilePosition and addToCartToast).

GotchasCopy Anchor Link

• Toasts show in the browser, and a Toaster must be mounted for anything to appear.
• Toaster also shows the messages the Salla SDK raises, for example after adding to cart. Inside the Salla mobile app it hands those to the native app instead. Your own toast() calls are always drawn by the Toaster.
• A page URL with ?success=message or ?danger=message shows that message once as a toast, then removes it from the address bar.
• On desktop toasts appear top-right, or top-left when the theme is RTL.
• If your theme shows its own add-to-cart feedback, set addToCartToast={false} to avoid two messages.

NextCopy Anchor Link

• React to cart events shows how to run code when the cart changes.
• Modal for dialogs.
• Layout and components