Deviopath › React

Toast Notifications

Hard · Timers

Build toast notifications that disappear by themselves.

Add three buttons: "Success", "Error" and "Info". Each click adds a toast inside <div className="toasts">:

- Success: <div className="toast success"> with the message "Saved successfully"

- Error: <div className="toast error"> with the message "Something went wrong"

- Info: <div className="toast info"> with the message "Here is some info"

Inside each toast put the message in <span className="message"> and a close button <button className="close">x</button>.

Rules: toasts are listed oldest first. Each toast removes itself 500ms after it was created. The close button removes that toast immediately. At most 3 toasts are visible: adding a 4th removes the oldest one.

Give every toast a unique id (a counter in a useRef works well).

Next: Undoable Delete