Toast

import { ToastProvider, useToast } from 'trivela-ui';

// Wrap the app once.
export function App({ children }) {
  return <ToastProvider position="bottom-right">{children}</ToastProvider>;
}

// Then float a toast from anywhere below.
export function SubscribeForm() {
  const { toast } = useToast();

  async function handleSubmit(event) {
    event.preventDefault();
    try {
      await subscribe();
      toast({ color: 'success', icon: true, title: 'Subscribed' });
    } catch {
      toast({ color: 'danger', icon: true, title: 'Could not subscribe' });
    }
  }

  return <form onSubmit={handleSubmit}>…</form>;
}