Toast

A ToastQueue holds the toasts: push(data) queues one and close(id) dismisses it. BsToaster renders the queue in a fixed corner, calling toast once per entry. A toast announces its text when it shows, and hides itself after five seconds unless the pointer or focus is on the toasts.

Basic usage

Source

import { ToastQueue } from '@mintplayer/ui-core/toast';import { BsToast, BsToastBody, BsToaster, BsToastHeader } from '@mintplayer/react-bootstrap/toast';const toasts = new ToastQueue<{ message: string }>();   // one per app: toast from anywhere<button type="button" className="btn btn-primary" onClick={() => toasts.push({ message: 'Saved!' })}>Show toast</button><BsToaster  queue={toasts}  toast={({ toast }) => (    <BsToast visible={toast.visible} onVisibleChange={() => toasts.close(toast.id)}>      <BsToastHeader><strong className="me-auto">Notification</strong></BsToastHeader>      <BsToastBody>{toast.data.message}</BsToastBody>    </BsToast>  )}/>