Overview
The ToastContext provides a centralized notification system for displaying toast messages to users. It supports multiple toast types (success, error, warning, info) with automatic dismissal and queue management.
Components
ToastProvider
The context provider component that manages toast state and provides notification functions.
The child components that will have access to the toast context
Example: App Setup
import { ToastProvider } from './contexts/ToastContext'
import { SettingsProvider } from './contexts/SettingsContext'
import App from './App'
function Root() {
return (
<SettingsProvider>
<ToastProvider>
<App />
</ToastProvider>
</SettingsProvider>
)
}
Hook API
useToast
A custom hook that provides access to toast notification functions. Must be used within a ToastProvider.
Returns: Toast context object with the following properties:
Array of currently active toast objects. Each toast has id, message, type, and duration properties
addToast
(message: string, type?: string, duration?: number) => number
General function to add a toast notificationParameters:
message (string, required): The toast message to displaytype (string, optional): Toast type - ‘success’, ‘error’, ‘warning’, or ‘info’. Defaults to ‘info’duration (number, optional): How long to show the toast in milliseconds. Defaults to 3000. Set to 0 for persistent toast
Returns: Unique toast ID Manually remove a toast by its ID
success
(message: string, duration?: number) => number
Convenience method to show a success toast. Uses green styling with check icon
error
(message: string, duration?: number) => number
Convenience method to show an error toast. Uses red styling with error icon
info
(message: string, duration?: number) => number
Convenience method to show an info toast. Uses blue styling with info icon
warning
(message: string, duration?: number) => number
Convenience method to show a warning toast. Uses yellow styling with warning icon
Usage Examples
Success Toast
import { useToast } from '../contexts/ToastContext'
function SaveButton() {
const { success } = useToast()
const handleSave = async () => {
await saveData()
success('Settings saved successfully')
}
return <button onClick={handleSave}>Save</button>
}
Error Toast
import { useToast } from '../contexts/ToastContext'
function DataFetcher() {
const { error } = useToast()
const fetchData = async () => {
try {
await api.getData()
} catch (err) {
error('Failed to load data. Please try again.')
}
}
return <button onClick={fetchData}>Load Data</button>
}
Custom Duration
import { useToast } from '../contexts/ToastContext'
function QuickNotification() {
const { info } = useToast()
const showQuickMessage = () => {
// Show for only 1 second
info('Quick message!', 1000)
}
return <button onClick={showQuickMessage}>Show Quick Toast</button>
}
Persistent Toast
import { useToast } from '../contexts/ToastContext'
function PersistentWarning() {
const { warning, removeToast } = useToast()
const showPersistentWarning = () => {
// Duration of 0 means it won't auto-dismiss
const toastId = warning('Action required: Please verify your email', 0)
// Manually remove after user action
setTimeout(() => {
removeToast(toastId)
}, 10000)
}
return <button onClick={showPersistentWarning}>Show Warning</button>
}
All Toast Types
import { useToast } from '../contexts/ToastContext'
function ToastDemo() {
const { success, error, warning, info } = useToast()
return (
<div>
<button onClick={() => success('Operation successful!')}>Success</button>
<button onClick={() => error('Something went wrong')}>Error</button>
<button onClick={() => warning('Please be careful')}>Warning</button>
<button onClick={() => info('Here is some information')}>Info</button>
</div>
)
}
import { useToast } from '../contexts/ToastContext'
import { useSettings } from '../contexts/SettingsContext'
function SettingsForm() {
const { toggleTheme, toggleLanguage } = useSettings()
const { success } = useToast()
const handleThemeChange = () => {
toggleTheme()
success('Theme changed successfully')
}
const handleLanguageChange = () => {
toggleLanguage()
success('Language updated')
}
return (
<div>
<button onClick={handleThemeChange}>Toggle Theme</button>
<button onClick={handleLanguageChange}>Toggle Language</button>
</div>
)
}
Toast Object Structure
Each toast in the toasts array has the following structure:
interface Toast {
id: number // Unique identifier (timestamp)
message: string // Toast message text
type: string // 'success' | 'error' | 'warning' | 'info'
duration: number // Auto-dismiss duration in milliseconds
}
Displaying Toasts
To actually render toasts on screen, use the ToastContainer component:
import ToastContainer from './components/common/ToastContainer'
function App() {
return (
<div>
{/* Your app content */}
<ToastContainer />
</div>
)
}
ToastContainer component:
- Reads toasts from the context using
useToast()
- Positions toasts in the bottom-right corner
- Handles animations (slide in/out)
- Shows a progress bar for auto-dismissing toasts
- Pauses auto-dismiss on hover
- Provides close buttons for manual dismissal
Features
Automatic Queue Management
Toasts are automatically added to a queue and displayed in order. Multiple toasts stack vertically.
Auto-Dismiss
By default, toasts auto-dismiss after 3 seconds. You can:
- Customize the duration per toast
- Set duration to 0 for persistent toasts
- Manually dismiss using
removeToast(id)
Type-Based Styling
Each toast type has distinct styling:
- Success: Green background with check icon
- Error: Red background with error icon
- Warning: Yellow background with warning icon
- Info: Blue background with info icon
Error Handling
The hook throws an error if used outside of a ToastProvider:
Error: useToast must be used within ToastProvider
Implementation Details
The context uses React hooks internally:
useState for managing the toasts arrayuseCallback for memoized toast functions- Unique IDs generated using
Date.now()
- Auto-removal via
setTimeout for time-based dismissal
