+
{
+ document.body.classList.toggle('bright');
+ }}>Toggle Theme
+
+
+
Toast Types
+
+ Different toast types for various notification scenarios. Click any button to show a toast.
+
+
+ {
+ DeesToast.info('This is an informational message');
+ }}>Info Toast
+
+ {
+ DeesToast.success('Operation completed successfully!');
+ }}>Success Toast
+
+ {
+ DeesToast.warning('Please review before proceeding');
+ }}>Warning Toast
+
+ {
+ DeesToast.error('An error occurred while processing');
+ }}>Error Toast
+
+
+
+
+
Toast Positions
+
+ Toasts can appear in different positions on the screen.
+
+
+ {
+ DeesToast.show({
+ message: 'Top Right Position',
+ type: 'info',
+ position: 'top-right'
+ });
+ }}>Top Right
+
+ {
+ DeesToast.show({
+ message: 'Top Left Position',
+ type: 'info',
+ position: 'top-left'
+ });
+ }}>Top Left
+
+ {
+ DeesToast.show({
+ message: 'Bottom Right Position',
+ type: 'info',
+ position: 'bottom-right'
+ });
+ }}>Bottom Right
+
+ {
+ DeesToast.show({
+ message: 'Bottom Left Position',
+ type: 'info',
+ position: 'bottom-left'
+ });
+ }}>Bottom Left
+
+ {
+ DeesToast.show({
+ message: 'Top Center Position',
+ type: 'info',
+ position: 'top-center'
+ });
+ }}>Top Center
+
+ {
+ DeesToast.show({
+ message: 'Bottom Center Position',
+ type: 'info',
+ position: 'bottom-center'
+ });
+ }}>Bottom Center
+
+
+
+
+
Duration Options
+
+ Control how long toasts stay visible. Duration in milliseconds.
+
+
+ {
+ DeesToast.show({
+ message: 'Quick toast (1 second)',
+ type: 'info',
+ duration: 1000
+ });
+ }}>1 Second
+
+ {
+ DeesToast.show({
+ message: 'Standard toast (3 seconds)',
+ type: 'info',
+ duration: 3000
+ });
+ }}>3 Seconds (Default)
+
+ {
+ DeesToast.show({
+ message: 'Long toast (5 seconds)',
+ type: 'info',
+ duration: 5000
+ });
+ }}>5 Seconds
+
+ {
+ DeesToast.show({
+ message: 'Manual dismiss only (click to close)',
+ type: 'warning',
+ duration: 0
+ });
+ }}>No Auto-Dismiss
+
+
+
+
+
Multiple Toasts
+
+ Multiple toasts stack automatically. They maintain their order and animate smoothly.
+
+
+ {
+ DeesToast.info('First notification');
+ setTimeout(() => DeesToast.success('Second notification'), 200);
+ setTimeout(() => DeesToast.warning('Third notification'), 400);
+ setTimeout(() => DeesToast.error('Fourth notification'), 600);
+ }}>Show Multiple
+
+ {
+ for (let i = 1; i <= 5; i++) {
+ setTimeout(() => {
+ DeesToast.show({
+ message: `Notification #${i}`,
+ type: i % 2 === 0 ? 'success' : 'info',
+ duration: 2000 + (i * 500)
+ });
+ }, i * 100);
+ }
+ }}>Rapid Fire
+
+
+
+
+
Real-World Examples
+
+ Common use cases for toast notifications in applications.
+
+
+ {
+ const toast = await DeesToast.show({
+ message: 'Saving changes...',
+ type: 'info',
+ duration: 0
+ });
+
+ // Simulate save operation
+ setTimeout(() => {
+ toast.dismiss();
+ DeesToast.success('Changes saved successfully!');
+ }, 2000);
+ }}>Save Operation
+
+ {
+ DeesToast.error('Failed to connect to server. Please check your internet connection.');
+ }}>Network Error
+
+ {
+ DeesToast.warning('Your session will expire in 5 minutes');
+ }}>Session Warning
+
+ {
+ DeesToast.success('File uploaded successfully!');
+ }}>Upload Complete
+
+
+
+
+
Programmatic Control
+
+ Advanced control over toast behavior.
+
+
+ {
+ const toast = await DeesToast.show({
+ message: 'This toast can be dismissed programmatically',
+ type: 'info',
+ duration: 0
+ });
+
+ setTimeout(() => {
+ toast.dismiss();
+ DeesToast.success('Toast dismissed after 2 seconds');
+ }, 2000);
+ }}>Programmatic Dismiss
+
+ {
+ // Using the convenience methods
+ DeesToast.info('Info message', 2000);
+ setTimeout(() => DeesToast.success('Success message', 2000), 500);
+ setTimeout(() => DeesToast.warning('Warning message', 2000), 1000);
+ setTimeout(() => DeesToast.error('Error message', 2000), 1500);
+ }}>Convenience Methods
+
+
+