toastify-pro 1.0.3 → 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 +164 -37
  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 +46 -5
  10. package/src/toastify-pro.js +656 -66
package/README.md CHANGED
@@ -1,9 +1,7 @@
1
- # 🎉 Toastify Pro
2
-
3
1
  <div align="center">
4
2
 
5
3
  <img src="https://abhipotter.github.io/toastify-pro/assets/logo/logo.png" alt="Toastify Pro Logo" width="100" height="100"/>
6
- <p>Toastify Pro</p>
4
+ <h1> 🚀 Quick Start - Install Toastify Pro (JavaScript Toast Notifications) </h1>
7
5
 
8
6
  **A modern, lightweight, and highly customizable toast notification library**
9
7
 
@@ -21,11 +19,17 @@
21
19
  - 🚀 **Lightweight** - Minimal bundle size with zero dependencies
22
20
  - 🎨 **6 Built-in Themes** - Success, Error, Info, Warning, Dark, and Light themes
23
21
  - 📱 **Flexible Positioning** - 6 different position options
24
- - ⚡ **Smooth Animations** - CSS transitions with fade and slide effects
22
+ - ⚡ **Apple-Style Animations** - Smooth AirDrop-inspired entrance and exit effects
25
23
  - 🔧 **Framework Agnostic** - Works with React, Vue, Angular, or vanilla JS
26
24
  - 🎯 **Auto-dismiss** - Configurable timeout with manual close option
25
+ - 📝 **Description Support** - Optional secondary text for detailed messages
27
26
  - 🌈 **Easy Customization** - Simple API with sensible defaults
28
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
29
33
 
30
34
  ## 🚀 Quick Start
31
35
 
@@ -38,7 +42,7 @@ npm install toastify-pro
38
42
 
39
43
  #### CDN (Browser)
40
44
  ```html
41
- <script src="https://cdn.jsdelivr.net/npm/toastify-pro@1.0.1/dist/toastify-pro.umd.min.js"></script>
45
+ <script src="https://cdn.jsdelivr.net/npm/toastify-pro/dist/toastify-pro.umd.min.js"></script>
42
46
  ```
43
47
 
44
48
  ### 🔨 Basic Usage
@@ -56,6 +60,11 @@ toast.warning('Please check your input');
56
60
  toast.info('New update available');
57
61
  toast.dark('Dark themed message');
58
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.');
59
68
  ```
60
69
 
61
70
  #### With CDN
@@ -64,7 +73,7 @@ toast.light('Light themed message');
64
73
  <html>
65
74
  <head>
66
75
  <title>Toastify Pro Example</title>
67
- <script src="https://cdn.jsdelivr.net/npm/toastify-pro@1.0.1/dist/toastify-pro.umd.min.js"></script>
76
+ <script src="https://cdn.jsdelivr.net/npm/toastify-pro/dist/toastify-pro.umd.min.js"></script>
68
77
  </head>
69
78
  <body>
70
79
  <button onclick="showToast()">Show Toast</button>
@@ -120,52 +129,87 @@ Main method to display a toast notification.
120
129
  toast.show('Custom message', 'success', {
121
130
  timeout: 5000, // Override default timeout
122
131
  allowClose: false, // Hide close button for this toast
123
- maxLength: 50 // Override message length limit
132
+ maxLength: 50, // Override message length limit
133
+ description: 'Additional details about the message' // Optional description
124
134
  });
125
135
  ```
126
136
 
127
- #### `toast.success(message, options)`
128
- 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.
129
142
  ```javascript
130
143
  toast.success('Data saved successfully!');
131
144
  toast.success('Upload complete!', { timeout: 2000 });
145
+ toast.success('Success!', 'Your changes have been saved.'); // With description
132
146
  ```
133
147
 
134
- #### `toast.error(message, options)`
135
- Display an error toast with red background.
148
+ #### `toast.error(message, options|description)`
149
+ Display an error toast with red background and error icon.
136
150
  ```javascript
137
151
  toast.error('Failed to save data!');
138
152
  toast.error('Network error occurred!', { allowClose: false });
153
+ toast.error('Error!', 'Please check your connection and try again.'); // With description
139
154
  ```
140
155
 
141
- #### `toast.warning(message, options)`
142
- Display a warning toast with orange background.
156
+ #### `toast.warning(message, options|description)`
157
+ Display a warning toast with orange background and warning icon.
143
158
  ```javascript
144
159
  toast.warning('Please verify your input');
145
160
  toast.warning('Session expires in 5 minutes', { timeout: 10000 });
161
+ toast.warning('Warning!', 'This action cannot be undone.'); // With description
146
162
  ```
147
163
 
148
- #### `toast.info(message, options)`
149
- Display an info toast with blue background.
164
+ #### `toast.info(message, options|description)`
165
+ Display an info toast with blue background and info icon.
150
166
  ```javascript
151
167
  toast.info('New feature available!');
152
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
153
170
  ```
154
171
 
155
- #### `toast.dark(message, options)`
156
- Display a dark themed toast.
172
+ #### `toast.dark(message, options|description)`
173
+ Display a dark themed toast with star icon.
157
174
  ```javascript
158
175
  toast.dark('Dark mode enabled');
159
176
  toast.dark('Processing in background...', { allowClose: false });
177
+ toast.dark('Dark Mode', 'Switched to elegant dark theme.'); // With description
160
178
  ```
161
179
 
162
- #### `toast.light(message, options)`
163
- 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.
164
182
  ```javascript
165
183
  toast.light('Light theme activated');
166
184
  toast.light('Settings updated', { timeout: 2000 });
185
+ toast.light('Light Mode', 'Switched to clean light theme.'); // With description
167
186
  ```
168
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
+
169
213
  ## 🎨 Customization
170
214
 
171
215
  ### Global Configuration
@@ -186,6 +230,16 @@ toast.error('Critical error!', { timeout: 0 });
186
230
  // Quick notification
187
231
  toast.success('Saved!', { timeout: 1000 });
188
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
+
189
243
  // Long message with close button
190
244
  toast.info('This is a very long message that might be truncated', {
191
245
  maxLength: 200,
@@ -246,11 +300,25 @@ function App() {
246
300
  const handleError = () => {
247
301
  toast?.error('Something went wrong in React!');
248
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
+ };
249
315
 
250
316
  return (
251
317
  <div>
252
318
  <button onClick={handleSuccess}>Show Success</button>
253
319
  <button onClick={handleError}>Show Error</button>
320
+ <button onClick={handleWithDescription}>Show with Description</button>
321
+ <button onClick={handleIconDemo}>Demo All Icons</button>
254
322
  </div>
255
323
  );
256
324
  }
@@ -358,23 +426,72 @@ document.getElementById('submitForm').addEventListener('click', async function()
358
426
  const response = await fetch('/api/submit', { method: 'POST' });
359
427
 
360
428
  if (response.ok) {
361
- toast.success('Form submitted successfully!');
429
+ toast.success('Form submitted successfully!', 'Your data has been processed and saved.');
362
430
  } else {
363
- toast.error('Failed to submit form');
431
+ toast.error('Failed to submit form', 'Please check your inputs and try again.');
364
432
  }
365
433
  } catch (error) {
366
- toast.error('Network error occurred');
434
+ toast.error('Network error occurred', 'Check your connection and retry.');
367
435
  }
368
436
  });
369
437
 
370
- // 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
371
449
  function showAllTypes() {
372
- toast.success('Success message');
373
- setTimeout(() => toast.error('Error message'), 500);
374
- setTimeout(() => toast.warning('Warning message'), 1000);
375
- setTimeout(() => toast.info('Info message'), 1500);
376
- setTimeout(() => toast.dark('Dark message'), 2000);
377
- 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);
378
495
  }
379
496
  ```
380
497
 
@@ -395,17 +512,27 @@ function showAllTypes() {
395
512
  | `timeout` | number | `3000` | Auto-dismiss time (0 = no auto-dismiss) |
396
513
  | `allowClose` | boolean | `true` | Show close button |
397
514
  | `maxLength` | number | `100` | Maximum message length |
515
+ | `description` | string | `undefined` | Optional secondary text for detailed information |
398
516
 
399
517
  ## 🎨 Available Themes
400
518
 
401
- | Theme | Background | Text Color | Use Case |
402
- |-------|------------|------------|----------|
403
- | `success` | Green | White | Success messages |
404
- | `error` | Red | White | Error messages |
405
- | `warning` | Orange | White | Warning messages |
406
- | `info` | Blue | White | Information messages |
407
- | `dark` | Dark Gray | White | General purpose |
408
- | `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
409
536
 
410
537
  ## 📄 License
411
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"