Action Toast Notification Block for React

So you can see an action toast without waiting for one: on load the first message is drawn in place at the stage's foot end, using the catalog toast's own classes, and its Reply works. Receive a message raises a real toast and the drawn one stays gone until a reload. In your app keep the toaster and the raise call, and drop the drawn copy: the "in-place" state, DrawnToast and the ol in the frame.

A toast is a notice, and the toaster's toasts hold a title, a line, one action and a close button; an input inside one would move focus into a layer that comes and goes. Reply takes the toast away instead and hands the work to the composer on the page, where the field, its label and the thread belong. A custom toast can hold a field (Sonner's toast.custom, Ark's Toast parts in your own Toaster), at the price of owning its focus and timing.

The toasts on screen are the newest three: when a fourth arrives the block takes the oldest away with its exit. The three typed messages come round again, each with its own id. Nothing is lost in your app, because the thread keeps every message; the toast is only the notice.

Here it adds a bubble to the drawn thread, clears the composer and says in a polite status message that nothing was sent. An empty reply says "Write a reply first." and stays. In your app post the reply in send and add the message to the thread from the response. Only a toast that is up answers a Reply, once, because a toaster can deliver an action twice.

The real toast lives in a live region that speaks it once and never takes focus; because it carries an action it stays until it is answered or closed. Reply and Dismiss name the sender, the composer's name follows the reply ("Reply to Imre Dolan"), and focus moves to it when Reply is pressed, and to Receive a message when a reply is cancelled. The drawn copy is a list named "Notifications".

The contact list drops out of the drawing, the thread keeps its bubbles and the composer stays at the foot. The drawn toast takes the width of the page minus a margin above the composer. The real toast is the library's own: full width at the end of the screen.