Toast

The Toast component provides you with popup notifications with auto-dismiss and positioning.

Live Examples

Using the Hook

With Action

Import

import { Toast, ToastProvider, useToast } from "@jarllyng/nostromo";
// or
import { Toast, ToastProvider, useToast } from "@jarllyng/nostromo/toast";

Usage

import { ToastProvider, useToast } from "@jarllyng/nostromo";
 
function App() {
  return (
    <ToastProvider>
      <MyComponent />
    </ToastProvider>
  );
}
 
function MyComponent() {
  const { addToast } = useToast();
 
  const handleClick = () => {
    addToast({
      variant: "success",
      title: "Success!",
      description: "Your action was completed.",
    });
  };
 
  return <button onClick={handleClick}>Show Toast</button>;
}

Best Practices

Do ✅

• Wrap your app with ToastProvider at the root level
• Use the useToast hook for easy toast management
• Provide clear title and description for each toast
• Use appropriate variant for different message types
• Set duration={0} for important toasts that require user action

Don’t ❌

• Don’t show too many toasts at once
• Don’t use toasts for critical errors (use dialogs instead)
• Don’t forget to handle toast actions
• Don’t use toasts for form validation (use inline errors)

Props

Toast

ToastProvider

useToast Hook

Returns:

• toasts: ToastProps[] - Array of current toasts
• addToast: (toast: Omit<ToastProps, 'id'>) => string - Add a new toast (returns toast ID)
• removeToast: (id: string) => void - Remove a toast by ID
• clearToasts: () => void - Clear all toasts