A toast queue: portal, max 3, auto-dismiss and pause on hover
Five toasts are queued; three show. Hovering the first pauses its timer, so after 500ms it's still there while 2 and 3 have gone and 4 and 5 moved up. After the pointer leaves, it finishes its remaining time. <ToastContext value={show}> is the React 19 way to provide a context.
Overlays float above the page, so they must escape clipping and stacking (portals or the browser's top layer), manage focus (trap it in modals, return it on close), dismiss predictably (Escape, outside click), position themselves next to their trigger without leaving the screen, and, for toasts, queue up, time out and pause while the user reads.
Change the code and press Run (Ctrl+Enter). Predict what will happen first, then break it on purpose and read what changes. Your edits are saved and match the lesson page.
Ready for more? This phase has 6 hands-on exercises with automatic checks.
Practice questions
Write the code in the editor, run it, then open the model answer to compare.
Add a type ("success" or "error") to the toast system; errors use role="alert" and don't auto-dismiss.
Make the tooltip also shift sideways so it never goes past the right edge of the window.
Explain it without notes
Why do overlays need portals or the top layer?
What does <dialog>.showModal() give you, and how do you use it from React?
Design a toast system: API, queueing, timing and accessibility.
How do you position a tooltip so it stays on screen?
Preview
Console
Nothing logged yet.Expected console output
Right after 5 saves: Saved file 1, Saved file 2, Saved file 3
After 500ms, hovering the first: Saved file 1, Saved file 4, Saved file 5
Later: none