toastify-pro 1.1.0 → 1.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (10) hide show
  1. package/README.md +163 -34
  2. package/assets/site/site.webmanifest +1 -1
  3. package/dist/toastify-pro.esm.js +658 -67
  4. package/dist/toastify-pro.esm.js.map +1 -0
  5. package/dist/toastify-pro.umd.js +661 -71
  6. package/dist/toastify-pro.umd.js.map +1 -0
  7. package/dist/toastify-pro.umd.min.js +21 -1
  8. package/dist/toastify-pro.umd.min.js.map +1 -0
  9. package/package.json +5 -4
  10. package/src/toastify-pro.js +656 -66
package/README.md CHANGED
@@ -19,11 +19,17 @@
19
19
  - 🚀 **Lightweight** - Minimal bundle size with zero dependencies
20
20
  - 🎨 **6 Built-in Themes** - Success, Error, Info, Warning, Dark, and Light themes
21
21
  - 📱 **Flexible Positioning** - 6 different position options
22
- - ⚡ **Smooth Animations** - CSS transitions with fade and slide effects
22
+ - ⚡ **Apple-Style Animations** - Smooth AirDrop-inspired entrance and exit effects
23
23
  - 🔧 **Framework Agnostic** - Works with React, Vue, Angular, or vanilla JS
24
24
  - 🎯 **Auto-dismiss** - Configurable timeout with manual close option
25
+ - 📝 **Description Support** - Optional secondary text for detailed messages
25
26
  - 🌈 **Easy Customization** - Simple API with sensible defaults
26
27
  - ♿ **Accessible** - Clean HTML structure with proper styling
28
+ - 🎨 **Custom SVG Icons** - Beautiful vector icons for each toast type
29
+ - 🚗 **Car Swipe Exit Animations** - Position-aware exit animations (5 types)
30
+ - 📱 **POP UP Entrance** - iOS-inspired entrance animation with rotation
31
+ - ✨ **Glassmorphism Design** - Modern backdrop blur effects and transparency
32
+ - 📊 **Progress Bar Animation** - Visual countdown with shimmer effects
27
33
 
28
34
  ## 🚀 Quick Start
29
35
 
@@ -36,7 +42,7 @@ npm install toastify-pro
36
42
 
37
43
  #### CDN (Browser)
38
44
  ```html
39
- <script src="https://cdn.jsdelivr.net/npm/toastify-pro@1.1.0/dist/toastify-pro.umd.min.js"></script>
45
+ <script src="https://cdn.jsdelivr.net/npm/toastify-pro/dist/toastify-pro.umd.min.js"></script>
40
46
  ```
41
47
 
42
48
  ### 🔨 Basic Usage
@@ -54,6 +60,11 @@ toast.warning('Please check your input');
54
60
  toast.info('New update available');
55
61
  toast.dark('Dark themed message');
56
62
  toast.light('Light themed message');
63
+
64
+ // Show toasts with descriptions
65
+ toast.success('Success!', 'Your changes have been saved successfully.');
66
+ toast.error('Error occurred!', 'Please check your network connection and try again.');
67
+ toast.info('New feature!', 'Check out our latest updates in the dashboard.');
57
68
  ```
58
69
 
59
70
  #### With CDN
@@ -62,7 +73,7 @@ toast.light('Light themed message');
62
73
  <html>
63
74
  <head>
64
75
  <title>Toastify Pro Example</title>
65
- <script src="https://cdn.jsdelivr.net/npm/toastify-pro@1.1.0/dist/toastify-pro.umd.min.js"></script>
76
+ <script src="https://cdn.jsdelivr.net/npm/toastify-pro/dist/toastify-pro.umd.min.js"></script>
66
77
  </head>
67
78
  <body>
68
79
  <button onclick="showToast()">Show Toast</button>
@@ -118,52 +129,87 @@ Main method to display a toast notification.
118
129
  toast.show('Custom message', 'success', {
119
130
  timeout: 5000, // Override default timeout
120
131
  allowClose: false, // Hide close button for this toast
121
- maxLength: 50 // Override message length limit
132
+ maxLength: 50, // Override message length limit
133
+ description: 'Additional details about the message' // Optional description
122
134
  });
123
135
  ```
124
136
 
125
- #### `toast.success(message, options)`
126
- Display a success toast with green background.
137
+ #### Enhanced Toast Methods with Description Support
138
+ All toast methods now support description as a second parameter or in options:
139
+
140
+ #### `toast.success(message, options|description)`
141
+ Display a success toast with green background and checkmark icon.
127
142
  ```javascript
128
143
  toast.success('Data saved successfully!');
129
144
  toast.success('Upload complete!', { timeout: 2000 });
145
+ toast.success('Success!', 'Your changes have been saved.'); // With description
130
146
  ```
131
147
 
132
- #### `toast.error(message, options)`
133
- Display an error toast with red background.
148
+ #### `toast.error(message, options|description)`
149
+ Display an error toast with red background and error icon.
134
150
  ```javascript
135
151
  toast.error('Failed to save data!');
136
152
  toast.error('Network error occurred!', { allowClose: false });
153
+ toast.error('Error!', 'Please check your connection and try again.'); // With description
137
154
  ```
138
155
 
139
- #### `toast.warning(message, options)`
140
- Display a warning toast with orange background.
156
+ #### `toast.warning(message, options|description)`
157
+ Display a warning toast with orange background and warning icon.
141
158
  ```javascript
142
159
  toast.warning('Please verify your input');
143
160
  toast.warning('Session expires in 5 minutes', { timeout: 10000 });
161
+ toast.warning('Warning!', 'This action cannot be undone.'); // With description
144
162
  ```
145
163
 
146
- #### `toast.info(message, options)`
147
- Display an info toast with blue background.
164
+ #### `toast.info(message, options|description)`
165
+ Display an info toast with blue background and info icon.
148
166
  ```javascript
149
167
  toast.info('New feature available!');
150
168
  toast.info('Check your email for verification', { timeout: 0 }); // No auto-dismiss
169
+ toast.info('Info', 'Here are some helpful tips for you.'); // With description
151
170
  ```
152
171
 
153
- #### `toast.dark(message, options)`
154
- Display a dark themed toast.
172
+ #### `toast.dark(message, options|description)`
173
+ Display a dark themed toast with star icon.
155
174
  ```javascript
156
175
  toast.dark('Dark mode enabled');
157
176
  toast.dark('Processing in background...', { allowClose: false });
177
+ toast.dark('Dark Mode', 'Switched to elegant dark theme.'); // With description
158
178
  ```
159
179
 
160
- #### `toast.light(message, options)`
161
- Display a light themed toast with dark text.
180
+ #### `toast.light(message, options|description)`
181
+ Display a light themed toast with dark text and calendar icon.
162
182
  ```javascript
163
183
  toast.light('Light theme activated');
164
184
  toast.light('Settings updated', { timeout: 2000 });
185
+ toast.light('Light Mode', 'Switched to clean light theme.'); // With description
165
186
  ```
166
187
 
188
+ ### 🆕 Enhanced Features
189
+
190
+ #### Custom SVG Icons
191
+ Each toast type includes beautiful vector icons that scale perfectly:
192
+ - **Success**: ✓ Checkmark circle icon
193
+ - **Error**: ✗ X circle icon
194
+ - **Warning**: ⚠ Triangle warning icon
195
+ - **Info**: ℹ Info circle icon
196
+ - **Dark**: ★ Star icon
197
+ - **Light**: ☀ Calendar icon
198
+
199
+ #### Position-Aware Car Swipe Animations
200
+ Toasts automatically exit with position-aware animations:
201
+ - `carSwipeBottom` - For bottom positioned toasts (swipes down)
202
+ - `carSwipeTop` - For top positioned toasts (swipes up)
203
+ - `carSwipeLeft` - For left positioned toasts (swipes left)
204
+ - `carSwipeRight` - For right positioned toasts (swipes right)
205
+ - `carSwipeCenter` - For center positioned toasts (swipes down)
206
+
207
+ #### POP UP Entrance Animation
208
+ All toasts use the `airdropPop` entrance animation with:
209
+ - 4-stage rotation and scaling effects
210
+ - Professional iOS-inspired timing
211
+ - Smooth cubic-bezier transitions
212
+
167
213
  ## 🎨 Customization
168
214
 
169
215
  ### Global Configuration
@@ -184,6 +230,16 @@ toast.error('Critical error!', { timeout: 0 });
184
230
  // Quick notification
185
231
  toast.success('Saved!', { timeout: 1000 });
186
232
 
233
+ // Toast with description - object format
234
+ toast.info('Update Available', {
235
+ description: 'Version 2.0 is now available with new features and improvements.',
236
+ timeout: 8000,
237
+ allowClose: true
238
+ });
239
+
240
+ // Toast with description - simple format
241
+ toast.success('Welcome!', 'Thanks for joining our platform. Explore the features!');
242
+
187
243
  // Long message with close button
188
244
  toast.info('This is a very long message that might be truncated', {
189
245
  maxLength: 200,
@@ -244,11 +300,25 @@ function App() {
244
300
  const handleError = () => {
245
301
  toast?.error('Something went wrong in React!');
246
302
  };
303
+
304
+ const handleWithDescription = () => {
305
+ toast?.info('New Feature!', 'Check out our latest React integration updates.');
306
+ };
307
+
308
+ const handleIconDemo = () => {
309
+ // Showcase different icons with descriptions
310
+ toast?.success('✓ Success Icon', 'Beautiful checkmark with green theme');
311
+ setTimeout(() => toast?.error('✗ Error Icon', 'Clear error indication with red theme'), 500);
312
+ setTimeout(() => toast?.warning('⚠ Warning Icon', 'Alert triangle with orange theme'), 1000);
313
+ setTimeout(() => toast?.info('ℹ Info Icon', 'Information circle with blue theme'), 1500);
314
+ };
247
315
 
248
316
  return (
249
317
  <div>
250
318
  <button onClick={handleSuccess}>Show Success</button>
251
319
  <button onClick={handleError}>Show Error</button>
320
+ <button onClick={handleWithDescription}>Show with Description</button>
321
+ <button onClick={handleIconDemo}>Demo All Icons</button>
252
322
  </div>
253
323
  );
254
324
  }
@@ -356,23 +426,72 @@ document.getElementById('submitForm').addEventListener('click', async function()
356
426
  const response = await fetch('/api/submit', { method: 'POST' });
357
427
 
358
428
  if (response.ok) {
359
- toast.success('Form submitted successfully!');
429
+ toast.success('Form submitted successfully!', 'Your data has been processed and saved.');
360
430
  } else {
361
- toast.error('Failed to submit form');
431
+ toast.error('Failed to submit form', 'Please check your inputs and try again.');
362
432
  }
363
433
  } catch (error) {
364
- toast.error('Network error occurred');
434
+ toast.error('Network error occurred', 'Check your connection and retry.');
365
435
  }
366
436
  });
367
437
 
368
- // Multiple toast types
438
+ // File upload with progress
439
+ function handleFileUpload() {
440
+ toast.info('Uploading...', 'Please wait while we process your file.');
441
+
442
+ // Simulate upload completion
443
+ setTimeout(() => {
444
+ toast.success('Upload complete!', 'Your file has been uploaded successfully.');
445
+ }, 3000);
446
+ }
447
+
448
+ // Multiple toast types with descriptions
369
449
  function showAllTypes() {
370
- toast.success('Success message');
371
- setTimeout(() => toast.error('Error message'), 500);
372
- setTimeout(() => toast.warning('Warning message'), 1000);
373
- setTimeout(() => toast.info('Info message'), 1500);
374
- setTimeout(() => toast.dark('Dark message'), 2000);
375
- setTimeout(() => toast.light('Light message'), 2500);
450
+ toast.success('Success!', 'Operation completed successfully');
451
+ setTimeout(() => toast.error('Error!', 'Something went wrong'), 500);
452
+ setTimeout(() => toast.warning('Warning!', 'Please review this action'), 1000);
453
+ setTimeout(() => toast.info('Info', 'Here is some helpful information'), 1500);
454
+ setTimeout(() => toast.dark('Dark Mode', 'Elegant dark notification'), 2000);
455
+ setTimeout(() => toast.light('Light Mode', 'Clean light notification'), 2500);
456
+ }
457
+
458
+ // Showcase new enhanced features
459
+ function demoEnhancedFeatures() {
460
+ // SVG Icons demo
461
+ toast.success('✓ Beautiful Icons', 'Each type has its own vector icon that scales perfectly');
462
+
463
+ // Car swipe animation (automatic based on position)
464
+ setTimeout(() => {
465
+ toast.info('🚗 Car Swipe Exit', 'Watch the position-aware exit animation');
466
+ }, 1000);
467
+
468
+ // Apple AirDrop entrance (automatic)
469
+ setTimeout(() => {
470
+ toast.warning('📱 AirDrop Style', 'iOS-inspired entrance with rotation effects');
471
+ }, 2000);
472
+
473
+ // Glassmorphism design
474
+ setTimeout(() => {
475
+ toast.dark('✨ Glassmorphism', 'Modern backdrop blur with translucent design');
476
+ }, 3000);
477
+ }
478
+
479
+ // Advanced usage with all new features
480
+ function advancedExample() {
481
+ // Progress indication with description
482
+ toast.info('Processing...', {
483
+ description: 'Please wait while we upload your file to the server',
484
+ timeout: 0, // No auto-dismiss
485
+ allowClose: true
486
+ });
487
+
488
+ // Simulate progress completion
489
+ setTimeout(() => {
490
+ toast.success('Upload Complete!', {
491
+ description: 'Your file has been uploaded successfully with all metadata',
492
+ timeout: 5000
493
+ });
494
+ }, 3000);
376
495
  }
377
496
  ```
378
497
 
@@ -393,17 +512,27 @@ function showAllTypes() {
393
512
  | `timeout` | number | `3000` | Auto-dismiss time (0 = no auto-dismiss) |
394
513
  | `allowClose` | boolean | `true` | Show close button |
395
514
  | `maxLength` | number | `100` | Maximum message length |
515
+ | `description` | string | `undefined` | Optional secondary text for detailed information |
396
516
 
397
517
  ## 🎨 Available Themes
398
518
 
399
- | Theme | Background | Text Color | Use Case |
400
- |-------|------------|------------|----------|
401
- | `success` | Green | White | Success messages |
402
- | `error` | Red | White | Error messages |
403
- | `warning` | Orange | White | Warning messages |
404
- | `info` | Blue | White | Information messages |
405
- | `dark` | Dark Gray | White | General purpose |
406
- | `light` | Light Gray | Black | Light theme compatibility |
519
+ | Theme | Background | Text Color | Icon | Use Case |
520
+ |-------|------------|------------|------|----------|
521
+ | `success` | Green | White | ✓ Checkmark | Success messages |
522
+ | `error` | Red | White | ✗ X Circle | Error messages |
523
+ | `warning` | Orange | White | ⚠ Triangle | Warning messages |
524
+ | `info` | Blue | White | ℹ Info Circle | Information messages |
525
+ | `dark` | Dark Gray | White | ★ Star | General purpose |
526
+ | `light` | Light Gray | Black | ☀ Calendar | Light theme compatibility |
527
+
528
+ ### 🆕 Enhanced Visual Features
529
+
530
+ - **Custom SVG Icons**: Each theme includes beautiful vector icons that are crisp at any resolution
531
+ - **Glassmorphism Design**: Modern backdrop-filter blur effects with translucent backgrounds
532
+ - **Car Swipe Animations**: Position-aware exit animations that swipe toasts in natural directions
533
+ - **POP UP Entrance**: Professional iOS-inspired entrance with 4-stage rotation and scaling
534
+ - **Progress Bar**: Animated progress bar with shimmer effects showing remaining time
535
+ - **Responsive Design**: Mobile-first approach that adapts to all screen sizes
407
536
 
408
537
  ## 📄 License
409
538
 
package/assets/site/site.webmanifest CHANGED
@@ -53,7 +53,7 @@
53
53
  "purpose": "any"
54
54
  },
55
55
  {
56
- "src": "/assets/icons/favicon.ico",
56
+ "src": "https://abhipotter.github.io/toastify-pro/assets/icons/favicon.ico",
57
57
  "sizes": "150x150",
58
58
  "type": "image/png",
59
59
  "purpose": "any"