@tour-kit/announcementsComponents
AnnouncementToast
AnnouncementToast component: auto-dismissing corner notification for quick updates with configurable duration and position
AnnouncementToast
A temporary notification that appears in a corner. Best for quick, non-critical messages.
When to Use
- Quick tips
- Success confirmations
- Non-critical updates
- Ephemeral messages
- Status notifications
Basic Usage
import { AnnouncementsProvider, AnnouncementToast } from '@tour-kit/announcements';
const announcements = [
{
id: 'quick-tip',
variant: 'toast',
title: 'Pro Tip: Use keyboard shortcuts!',
toastOptions: {
position: 'bottom-right',
autoDismiss: true,
autoDismissDelay: 5000,
},
},
];
<AnnouncementToast id="quick-tip" />Toast Options
Prop
Type
Positions
// Top positions
toastOptions: { position: 'top-left' }
toastOptions: { position: 'top-center' }
toastOptions: { position: 'top-right' }
// Bottom positions
toastOptions: { position: 'bottom-left' }
toastOptions: { position: 'bottom-center' }
toastOptions: { position: 'bottom-right' } // DefaultAuto-Dismiss
// Auto-dismiss after 3 seconds
toastOptions: {
autoDismiss: true,
autoDismissDelay: 3000,
showProgress: true, // Progress bar countdown
}
// Manual dismiss only
toastOptions: {
autoDismiss: false,
}Complete Example
{
id: 'success-message',
variant: 'toast',
title: 'Changes saved successfully!',
toastOptions: {
position: 'bottom-right',
autoDismiss: true,
autoDismissDelay: 4000,
showProgress: true,
intent: 'success',
},
frequency: 'always', // Show every time
onDismiss: (reason) => {
if (reason === 'auto_dismiss') {
console.log('Toast auto-dismissed');
}
},
}Intent Styles
toastOptions: { intent: 'default' } // Neutral
toastOptions: { intent: 'info' } // Blue
toastOptions: { intent: 'success' } // Green
toastOptions: { intent: 'warning' } // Yellow
toastOptions: { intent: 'error' } // Red