Toast Notification
Problem statement
A Toast Notification system is a global UI pattern used in virtually every production application — you see it in Gmail, GitHub, Slack, and every SaaS product. Toasts are small, auto-dismissing messages that appear at the edge of the screen to give the user non-blocking feedback: "File saved", "Error connecting to server", "Link copied to clipboard".
Your task is to build a complete toast system in React. The architectural challenge here goes beyond a single component. Toasts need to be triggered from anywhere in the application — a network request that fails, a form that submits, a button that copies text. This global-trigger requirement forces you into a real architectural decision: how do you share the addToast function across the entire component tree without prop-drilling it through every intermediate component?
Your implementation should provide a ToastProvider that wraps the app, a useToast hook that any component can call to trigger a toast, support for multiple simultaneous toasts, auto-dismiss after a configurable duration, manual dismissal via a close button, and smooth slide-in and fade-out animations.
Requirements & constraints
- ToastProvider wraps the app and manages global toast state
- useToast hook exposes an addToast function to any component in the tree
- addToast accepts { message, type, duration } — type is one of: success, error, warning, info
- Multiple toasts can be visible simultaneously, stacked vertically
- Each toast auto-dismisses after its duration (default 3500ms)
- Manual dismiss via a close (×) button on each toast
- Smooth slide-in animation on appear, fade-out on dismiss
How to approach Toast Notification
The strategy an interviewer expects you to reach for.
Problem Understanding The moment you see "trigger from anywhere in the app", your brain should immediately say: Context API. Prop-drilling addToast through every component between the root and the button that triggers it is not a solution — it's a maintenance nightmare. Context is exactly what it was designed for: sharing a value (or function) globally without explicit prop passing at every level.
The full solution is part of HelloFrontend Pro
The question above is free to read in full. Upgrade to unlock the interactive workspace and the senior-level walkthrough that go with it.
- Live React sandbox pre-wired for this component
- Time-boxed checkpoints that mirror a real 45-minute round
- Interviewer scoring criteria and a full reference implementation
Already a member? Log in to open the workspace.