How would you design a notification/toast system in React?

🧩 Scenario

You need a global toast/notification system usable from anywhere in the app:

• Show success, error, warning, or info toasts
• Support auto-dismiss + manual close
• Allow multiple toasts with queueing
• Animations (enter/exit)
• Accessible via screen readers
• Should work even if triggered deep inside component tree

🧠 Answer (Design Overview)

Core Design Principles

1. Global State + Context Provider: Expose a useToast() hook that any component can call.

2. Portal Rendering: Render toasts at the document root using ReactDOM.createPortal().

3. Toast Store: Maintain: { id, message, type, duration, createdAt }.

4. Queue + Auto-Dismiss: Each toast removes itself after duration ms.

5. Animations: Apply CSS transitions for slide-in/slide-out.

6. Accessibility: Use role="alert" for important messages.

Tradeoffs:

• Context-based systems are simple but need caution with re-renders.
• External event emitter avoids rerenders but adds complexity.

🎮 Live Demo: Notification Toast System

🔍 Real-World Tips

• Use Framer Motion for smoother animations.
• Add stacking logic to push older toasts downward.
• Add swipe-to-dismiss on mobile.
• Add global maxToasts or queueing rules.
• Provide Promise-based API: showAsync("Uploading...").

🧭 Diagram

flowchart TD
  A[Trigger Toast] --> B[Context.show]
  B --> C[Push to Toast State]
  C --> D[Portal Renderer]
  D --> E[Animated Toast]
  E -->|Auto dismiss| F[Remove Toast]

Quick Practice

1. Add a close button in each toast.
2. Add maxToasts: 3 and queue additional ones.
3. Animate exit using opacity fade-out.
4. Add support for toast actions (e.g., "Undo").

Summary

• Use context + portal for global toast rendering.
• Auto-dismiss + animations create a polished UX.
• Keep toast data simple: {id, message, type, duration}.
• Add queueing, actions, and accessibility for production-grade systems.