customizable-toast-notification 3.11.0 β 3.11.2
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.
- package/CHANGELOG.md +68 -54
- package/LICENSE +201 -201
- package/README.md +384 -384
- package/dist/index.cjs +16 -0
- package/dist/index.cjs.map +1 -0
- package/dist/index.esm.mjs +6 -5
- package/dist/index.esm.mjs.map +1 -0
- package/dist/index.umd.js +6 -5
- package/dist/index.umd.js.map +1 -0
- package/package.json +163 -145
- package/postinstall.js +27 -27
package/README.md
CHANGED
|
@@ -1,384 +1,384 @@
|
|
|
1
|
-
# π Customizable Toast Notifications
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
[](https://opensource.org/licenses/Apache-2.0)
|
|
6
|
-
[](https://bundlephobia.com/package/customizable-toast-notification)
|
|
7
|
-
|
|
8
|
-
A **lightweight**, **zero-dependency** toast notification library for modern JavaScript applications. Built with production-grade reliability and comprehensive secret mechanisms.
|
|
9
|
-
|
|
10
|
-
## β¨ Key Features
|
|
11
|
-
|
|
12
|
-
- π« **Zero Dependencies** - Pure JavaScript with no external requirements Lightweight and fast
|
|
13
|
-
- π‘οΈ **Production Ready** - Reliable and scalable for production environments
|
|
14
|
-
- π¨ **Highly Customizable** - Colors, positions, animations, progress bars
|
|
15
|
-
- π **Framework Agnostic** - Works with React, Vue, Angular, or vanilla JS
|
|
16
|
-
- π± **Responsive** - Works on all screen sizes and devices
|
|
17
|
-
- β‘ **CDN Ready** - Easy integration via CDN or npm
|
|
18
|
-
- π¨ **Fully Customizable** - Colors, positions, animations, and styling
|
|
19
|
-
- βΏ **Accessible** - ARIA live regions and keyboard navigation support
|
|
20
|
-
- π **Smart Grouping** - Duplicate notifications are automatically grouped with badges
|
|
21
|
-
- βΈοΈ **Pause on Hover** - CTA toasts pause when user hovers or focuses
|
|
22
|
-
- π― **Call-to-Action** - Built-in support for interactive buttons and links
|
|
23
|
-
- π **Queue Management** - Maximum 3 visible toasts with intelligent queueing
|
|
24
|
-
- π **Multiple Themes** - Success, error, warning, and info styles
|
|
25
|
-
- π§ **TypeScript Ready** - TypeScript definitions included Full type support (coming soon)
|
|
26
|
-
|
|
27
|
-
## π¦ Installation
|
|
28
|
-
|
|
29
|
-
### NPM/Yarn
|
|
30
|
-
|
|
31
|
-
```bash
|
|
32
|
-
npm install customizable-toast-notification
|
|
33
|
-
```
|
|
34
|
-
|
|
35
|
-
or
|
|
36
|
-
|
|
37
|
-
```bash
|
|
38
|
-
yarn add customizable-toast-notification
|
|
39
|
-
```
|
|
40
|
-
|
|
41
|
-
## π Quick Start
|
|
42
|
-
|
|
43
|
-
### ES Modules
|
|
44
|
-
|
|
45
|
-
```bash
|
|
46
|
-
|
|
47
|
-
import { createToast, setDefaultColors, setDefaultMessages } from 'customizable-toast-notification';
|
|
48
|
-
|
|
49
|
-
// Simple usage
|
|
50
|
-
createToast({
|
|
51
|
-
message: "Hello World!",
|
|
52
|
-
type: "success",
|
|
53
|
-
duration: 3000
|
|
54
|
-
});
|
|
55
|
-
|
|
56
|
-
```
|
|
57
|
-
|
|
58
|
-
### CDN/Browser (UMD Build) / Quick Try with jsDelivr
|
|
59
|
-
|
|
60
|
-
```bash
|
|
61
|
-
Global Variable Name: customizableToast
|
|
62
|
-
|
|
63
|
-
<!-- Always latest version -->
|
|
64
|
-
<script src="https://cdn.jsdelivr.net/npm/customizable-toast-notification/dist/index.umd.js"></script>
|
|
65
|
-
|
|
66
|
-
<!-- OR pin to a specific version (recommended for stability) -->
|
|
67
|
-
<script src="https://cdn.jsdelivr.net/npm/customizable-toast-notification@3.9.5/dist/index.umd.js"></script>
|
|
68
|
-
|
|
69
|
-
<script>
|
|
70
|
-
// Access the global UMD export
|
|
71
|
-
customizableToast.createToast({
|
|
72
|
-
message: "Hello from jsDelivr! π",
|
|
73
|
-
backgroundColor: "black",
|
|
74
|
-
textColor: "snow",
|
|
75
|
-
position: "top-center",
|
|
76
|
-
animationDuration: "3s",
|
|
77
|
-
animationEasing: "ease",
|
|
78
|
-
progressPosition: "top",
|
|
79
|
-
cta: {
|
|
80
|
-
autoClose: false,
|
|
81
|
-
label: "Check Pkg!",
|
|
82
|
-
href: "https://www.npmjs.com/package/customizable-toast-notification",
|
|
83
|
-
variant: "link",
|
|
84
|
-
target: "_blank"
|
|
85
|
-
}
|
|
86
|
-
});
|
|
87
|
-
</script>
|
|
88
|
-
|
|
89
|
-
```
|
|
90
|
-
|
|
91
|
-
## π API Reference
|
|
92
|
-
|
|
93
|
-
### `createToast(options)`
|
|
94
|
-
|
|
95
|
-
Creates and displays a toast notification.
|
|
96
|
-
|
|
97
|
-
#### Options
|
|
98
|
-
|
|
99
|
-
| Parameter | Type | Default | Description |
|
|
100
|
-
| ------------------- | --------- | ----------------------- | --------------------------------------------------------- |
|
|
101
|
-
| `message` | `string` | Based on `type` | Toast message content |
|
|
102
|
-
| `type` | `string` | `"info"` | `"info"`, `"success"`, `"error"`, `"warning"` |
|
|
103
|
-
| `duration` | `number` | `3000` | Auto-dismiss time in milliseconds |
|
|
104
|
-
| `position` | `string` | `"bottom-right"` | Toast position on screen |
|
|
105
|
-
| `backgroundColor` | `string` | Based on `type` | Custom background color |
|
|
106
|
-
| `textColor` | `string` | `"white"` | Custom text color |
|
|
107
|
-
| `showCloseButton` | `boolean` | `false` | Show close (Γ) button |
|
|
108
|
-
| `showProgressBar` | `boolean` | `false` | Show countdown progress bar |
|
|
109
|
-
| `animationDuration` | `string` | `"0.5s"` | CSS animation duration |
|
|
110
|
-
| `animationEasing` | `string` | `"ease"` | CSS animation easing function |
|
|
111
|
-
| `progressColor` | `string` | `rgba(255,255,255,0.3)` | Progress bar color |
|
|
112
|
-
| `progressHeight` | `string` | `"4px"` | Progress bar height |
|
|
113
|
-
| `progressPosition` | `string` | `"bottom"` | Progress bar position: `"top"` or `"bottom"` |
|
|
114
|
-
| `pauseOnHover` | `boolean` | `auto` | Pause timer on hover (auto: true for CTA toasts) |
|
|
115
|
-
| `cta` | `object` | `null` | Call-to-action configuration (see [CTA](#call-to-action)) |
|
|
116
|
-
|
|
117
|
-
#### Position Options
|
|
118
|
-
|
|
119
|
-
```bash
|
|
120
|
-
// Corner positions
|
|
121
|
-
- "top-left", "top-right", "bottom-left", "bottom-right"
|
|
122
|
-
|
|
123
|
-
// Edge positions
|
|
124
|
-
- "top-center", "bottom-center", "left-center", "right-center"
|
|
125
|
-
|
|
126
|
-
// Full width
|
|
127
|
-
- "top-full-width", "bottom-full-width"
|
|
128
|
-
|
|
129
|
-
// Center
|
|
130
|
-
- "center"
|
|
131
|
-
|
|
132
|
-
```
|
|
133
|
-
|
|
134
|
-
## π― Call-to-Action (CTA)
|
|
135
|
-
|
|
136
|
-
Add interactive buttons or links to your toasts:
|
|
137
|
-
|
|
138
|
-
```bash
|
|
139
|
-
// Button CTA
|
|
140
|
-
createToast({
|
|
141
|
-
message: "File uploaded successfully!",
|
|
142
|
-
type: "success",
|
|
143
|
-
cta: {
|
|
144
|
-
label: "View File",
|
|
145
|
-
onClick: () => {
|
|
146
|
-
window.open('/files/latest');
|
|
147
|
-
},
|
|
148
|
-
autoClose: true // Close toast after click (default: true)
|
|
149
|
-
}
|
|
150
|
-
});
|
|
151
|
-
|
|
152
|
-
// Link CTA
|
|
153
|
-
createToast({
|
|
154
|
-
message: "New version available!",
|
|
155
|
-
cta: {
|
|
156
|
-
label: "Download",
|
|
157
|
-
href: "https://example.com/download",
|
|
158
|
-
variant: "link",
|
|
159
|
-
target: "_blank"
|
|
160
|
-
}
|
|
161
|
-
});
|
|
162
|
-
|
|
163
|
-
// Advanced CTA with async action
|
|
164
|
-
createToast({
|
|
165
|
-
message: "Ready to sync your data?",
|
|
166
|
-
cta: {
|
|
167
|
-
label: "Sync Now",
|
|
168
|
-
ariaLabel: "Start data synchronization",
|
|
169
|
-
autoClose: false,
|
|
170
|
-
onClick: async () => {
|
|
171
|
-
await performDataSync();
|
|
172
|
-
// Manually close if needed
|
|
173
|
-
}
|
|
174
|
-
}
|
|
175
|
-
});
|
|
176
|
-
|
|
177
|
-
```
|
|
178
|
-
|
|
179
|
-
### CTA Options
|
|
180
|
-
|
|
181
|
-
| Parameter | Type | Default | Description |
|
|
182
|
-
| ----------- | ---------- | ---------- | ------------------------------ |
|
|
183
|
-
| `label` | `string` | `required` | Button/link text |
|
|
184
|
-
| `onClick` | `function` | `null` | Click handler (for buttons) |
|
|
185
|
-
| `href` | `string` | `null` | URL (for links) |
|
|
186
|
-
| `variant` | `string` | `"button"` | `"button"` or `"link"` |
|
|
187
|
-
| `target` | `string` | `null` | Link target (`"_blank"`, etc.) |
|
|
188
|
-
| `rel` | `string` | `auto` | Link relationship |
|
|
189
|
-
| `autoClose` | `boolean` | `true` | Close toast after CTA click |
|
|
190
|
-
| `ariaLabel` | `string` | `label` | Accessibility label |
|
|
191
|
-
|
|
192
|
-
## π¨ Examples
|
|
193
|
-
|
|
194
|
-
### All Toast Types
|
|
195
|
-
|
|
196
|
-
### `setDefaultColors(colors)`
|
|
197
|
-
|
|
198
|
-
```bash
|
|
199
|
-
|
|
200
|
-
Configure default colors for toast types.
|
|
201
|
-
|
|
202
|
-
setDefaultColors({
|
|
203
|
-
success: "#10b981",
|
|
204
|
-
error: "#ef4444",
|
|
205
|
-
warning: "#f59e0b",
|
|
206
|
-
info: "#3b82f6"
|
|
207
|
-
});
|
|
208
|
-
|
|
209
|
-
```
|
|
210
|
-
|
|
211
|
-
### `setDefaultMessages(messages)`
|
|
212
|
-
|
|
213
|
-
```bash
|
|
214
|
-
Configure default messages for toast types.
|
|
215
|
-
|
|
216
|
-
setDefaultMessages({
|
|
217
|
-
success: "Operation completed successfully!",
|
|
218
|
-
error: "Something went wrong!",
|
|
219
|
-
warning: "Please check your input!",
|
|
220
|
-
info: "Here's some information!"
|
|
221
|
-
});
|
|
222
|
-
|
|
223
|
-
```
|
|
224
|
-
|
|
225
|
-
## π‘ Examples
|
|
226
|
-
|
|
227
|
-
### Basic Toast Types
|
|
228
|
-
|
|
229
|
-
```bash
|
|
230
|
-
// Success
|
|
231
|
-
createToast({ type: "success", message: "Data saved!" });
|
|
232
|
-
|
|
233
|
-
// Error
|
|
234
|
-
createToast({ type: "error", message: "Save failed!" });
|
|
235
|
-
|
|
236
|
-
// Warning
|
|
237
|
-
createToast({ type: "warning", message: "Please confirm!" });
|
|
238
|
-
|
|
239
|
-
// Info
|
|
240
|
-
createToast({ type: "info", message: "New update available!" });
|
|
241
|
-
|
|
242
|
-
```
|
|
243
|
-
|
|
244
|
-
### Advanced Customization
|
|
245
|
-
|
|
246
|
-
```bash
|
|
247
|
-
createToast({
|
|
248
|
-
message: "File uploading...",
|
|
249
|
-
type: "info",
|
|
250
|
-
duration: 5000,
|
|
251
|
-
position: "top-center",
|
|
252
|
-
showProgressBar: true,
|
|
253
|
-
showCloseButton: true,
|
|
254
|
-
backgroundColor: "#6366f1",
|
|
255
|
-
textColor: "white",
|
|
256
|
-
progressColor: "#e0e7ff",
|
|
257
|
-
progressPosition: "top",
|
|
258
|
-
animationDuration: "0.8s",
|
|
259
|
-
animationEasing: "ease-out"
|
|
260
|
-
});
|
|
261
|
-
|
|
262
|
-
### App-wide Configuration
|
|
263
|
-
|
|
264
|
-
// Set your brand colors once
|
|
265
|
-
setDefaultColors({
|
|
266
|
-
success: "#10b981", // Your brand green
|
|
267
|
-
error: "#ef4444", // Your brand red
|
|
268
|
-
warning: "#f59e0b", // Your brand yellow
|
|
269
|
-
info: "#3b82f6" // Your brand blue
|
|
270
|
-
});
|
|
271
|
-
|
|
272
|
-
// Set your app messages
|
|
273
|
-
setDefaultMessages({
|
|
274
|
-
success: "β
Success! Changes saved.",
|
|
275
|
-
error: "β Error! Please try again.",
|
|
276
|
-
warning: "β οΈ Warning! Check your input.",
|
|
277
|
-
info: "π‘ Info! Here's a tip."
|
|
278
|
-
});
|
|
279
|
-
|
|
280
|
-
// Now just use types throughout your app
|
|
281
|
-
createToast({ type: "success" }); // Uses your custom colors & messages
|
|
282
|
-
|
|
283
|
-
```
|
|
284
|
-
|
|
285
|
-
## π Advanced Features
|
|
286
|
-
|
|
287
|
-
### Smart Grouping
|
|
288
|
-
|
|
289
|
-
Identical toasts (same type, message, and position) are automatically grouped:
|
|
290
|
-
|
|
291
|
-
- Shows a single toast with a badge counter
|
|
292
|
-
- Resets the dismiss timer when new duplicates arrive
|
|
293
|
-
- Maximum of 3 toasts visible at once
|
|
294
|
-
|
|
295
|
-
### Queue Management
|
|
296
|
-
|
|
297
|
-
- Only 3 toasts are shown simultaneously
|
|
298
|
-
- Additional toasts are queued automatically
|
|
299
|
-
- Queue is processed as toasts are dismissed
|
|
300
|
-
|
|
301
|
-
### Accessibility
|
|
302
|
-
|
|
303
|
-
- ARIA live regions announce new toasts to screen readers
|
|
304
|
-
- Keyboard navigation support (Tab, Enter, Escape)
|
|
305
|
-
- High contrast badge design
|
|
306
|
-
- Semantic HTML structure
|
|
307
|
-
|
|
308
|
-
## π‘οΈ Reliability Features
|
|
309
|
-
|
|
310
|
-
### Production-Grade System
|
|
311
|
-
|
|
312
|
-
- \*\*Rich toast β Basic toast β Emergency alert
|
|
313
|
-
- **Zero-Crash Guarantee**: Comprehensive error handling prevents application crashes
|
|
314
|
-
- **Memory Management**: Automatic cleanup prevents memory leaks
|
|
315
|
-
- **CDN Cache-Busting**: Ensures fresh content delivery
|
|
316
|
-
|
|
317
|
-
### Browser Compatibility
|
|
318
|
-
|
|
319
|
-
- β
Chrome
|
|
320
|
-
- β
Firefox
|
|
321
|
-
- β
Safari
|
|
322
|
-
- β
Edge
|
|
323
|
-
- β
Mobile browsers
|
|
324
|
-
|
|
325
|
-
## π Bundle Information
|
|
326
|
-
|
|
327
|
-
- **Size**: ~8KB minified, ~4KB gzipped
|
|
328
|
-
- **Dependencies**: Zero
|
|
329
|
-
- **Formats**: UMD, ES Modules
|
|
330
|
-
- **TypeScript**: Definitions included (full coming soon)
|
|
331
|
-
|
|
332
|
-
## π€ Contributing
|
|
333
|
-
|
|
334
|
-
Exciting times ahead! Looking for sponsors and eager to explore new collaborations:) . Contributions are welcome! Please read our [Contributing Guidelines](CONTRIBUTING.md) for details.
|
|
335
|
-
|
|
336
|
-
### Development Setup
|
|
337
|
-
|
|
338
|
-
```bash
|
|
339
|
-
|
|
340
|
-
git clone https://github.com/sammy-cool/customizable-toast-notification.git
|
|
341
|
-
cd customizable-toast-notification
|
|
342
|
-
npm install
|
|
343
|
-
npm run build
|
|
344
|
-
|
|
345
|
-
```
|
|
346
|
-
|
|
347
|
-
## π License
|
|
348
|
-
|
|
349
|
-
This project is licensed under the [Apache-2.0 License](LICENSE).
|
|
350
|
-
|
|
351
|
-
## π¨βπ» Author
|
|
352
|
-
|
|
353
|
-
**Priyanshu Patel**
|
|
354
|
-
|
|
355
|
-
- π§ Email: priyanshu.alt191@gmail.com
|
|
356
|
-
- π GitHub: [@sammy-cool](https://github.com/sammy-cool)
|
|
357
|
-
|
|
358
|
-
---
|
|
359
|
-
|
|
360
|
-
## π Support
|
|
361
|
-
|
|
362
|
-
If this library helped your project, please consider:
|
|
363
|
-
|
|
364
|
-
β **Star this repository** to show your support!
|
|
365
|
-
|
|
366
|
-
π **Share feedback** at priyanshu.alt191@gmail.com
|
|
367
|
-
|
|
368
|
-
β **Buy me a coffee** if you'd like to support development:
|
|
369
|
-
|
|
370
|
-
- π PayPal: [paypal.me/priyanshupatel1](https://paypal.me/priyanshupatel1)
|
|
371
|
-
- π³ UPI: `eureka91@upi`
|
|
372
|
-
|
|
373
|
-
<details>
|
|
374
|
-
<summary>π± Support via QR Code</summary>
|
|
375
|
-
|
|
376
|
-
|
|
377
|
-
|
|
378
|
-
</details>
|
|
379
|
-
|
|
380
|
-
**Thank you for your support! π**
|
|
381
|
-
|
|
382
|
-
---
|
|
383
|
-
|
|
384
|
-
_Made with β€οΈ for the JavaScript community_
|
|
1
|
+
# π Customizable Toast Notifications
|
|
2
|
+
|
|
3
|
+
|
|
4
|
+
|
|
5
|
+
[](https://opensource.org/licenses/Apache-2.0)
|
|
6
|
+
[](https://bundlephobia.com/package/customizable-toast-notification)
|
|
7
|
+
|
|
8
|
+
A **lightweight**, **zero-dependency** toast notification library for modern JavaScript applications. Built with production-grade reliability and comprehensive secret mechanisms.
|
|
9
|
+
|
|
10
|
+
## β¨ Key Features
|
|
11
|
+
|
|
12
|
+
- π« **Zero Dependencies** - Pure JavaScript with no external requirements Lightweight and fast
|
|
13
|
+
- π‘οΈ **Production Ready** - Reliable and scalable for production environments
|
|
14
|
+
- π¨ **Highly Customizable** - Colors, positions, animations, progress bars
|
|
15
|
+
- π **Framework Agnostic** - Works with React, Vue, Angular, or vanilla JS
|
|
16
|
+
- π± **Responsive** - Works on all screen sizes and devices
|
|
17
|
+
- β‘ **CDN Ready** - Easy integration via CDN or npm
|
|
18
|
+
- π¨ **Fully Customizable** - Colors, positions, animations, and styling
|
|
19
|
+
- βΏ **Accessible** - ARIA live regions and keyboard navigation support
|
|
20
|
+
- π **Smart Grouping** - Duplicate notifications are automatically grouped with badges
|
|
21
|
+
- βΈοΈ **Pause on Hover** - CTA toasts pause when user hovers or focuses
|
|
22
|
+
- π― **Call-to-Action** - Built-in support for interactive buttons and links
|
|
23
|
+
- π **Queue Management** - Maximum 3 visible toasts with intelligent queueing
|
|
24
|
+
- π **Multiple Themes** - Success, error, warning, and info styles
|
|
25
|
+
- π§ **TypeScript Ready** - TypeScript definitions included Full type support (coming soon)
|
|
26
|
+
|
|
27
|
+
## π¦ Installation
|
|
28
|
+
|
|
29
|
+
### NPM/Yarn
|
|
30
|
+
|
|
31
|
+
```bash
|
|
32
|
+
npm install customizable-toast-notification
|
|
33
|
+
```
|
|
34
|
+
|
|
35
|
+
or
|
|
36
|
+
|
|
37
|
+
```bash
|
|
38
|
+
yarn add customizable-toast-notification
|
|
39
|
+
```
|
|
40
|
+
|
|
41
|
+
## π Quick Start
|
|
42
|
+
|
|
43
|
+
### ES Modules
|
|
44
|
+
|
|
45
|
+
```bash
|
|
46
|
+
|
|
47
|
+
import { createToast, setDefaultColors, setDefaultMessages } from 'customizable-toast-notification';
|
|
48
|
+
|
|
49
|
+
// Simple usage
|
|
50
|
+
createToast({
|
|
51
|
+
message: "Hello World!",
|
|
52
|
+
type: "success",
|
|
53
|
+
duration: 3000
|
|
54
|
+
});
|
|
55
|
+
|
|
56
|
+
```
|
|
57
|
+
|
|
58
|
+
### CDN/Browser (UMD Build) / Quick Try with jsDelivr
|
|
59
|
+
|
|
60
|
+
```bash
|
|
61
|
+
Global Variable Name: customizableToast
|
|
62
|
+
|
|
63
|
+
<!-- Always latest version -->
|
|
64
|
+
<script src="https://cdn.jsdelivr.net/npm/customizable-toast-notification/dist/index.umd.js"></script>
|
|
65
|
+
|
|
66
|
+
<!-- OR pin to a specific version (recommended for stability) -->
|
|
67
|
+
<script src="https://cdn.jsdelivr.net/npm/customizable-toast-notification@3.9.5/dist/index.umd.js"></script>
|
|
68
|
+
|
|
69
|
+
<script>
|
|
70
|
+
// Access the global UMD export
|
|
71
|
+
customizableToast.createToast({
|
|
72
|
+
message: "Hello from jsDelivr! π",
|
|
73
|
+
backgroundColor: "black",
|
|
74
|
+
textColor: "snow",
|
|
75
|
+
position: "top-center",
|
|
76
|
+
animationDuration: "3s",
|
|
77
|
+
animationEasing: "ease",
|
|
78
|
+
progressPosition: "top",
|
|
79
|
+
cta: {
|
|
80
|
+
autoClose: false,
|
|
81
|
+
label: "Check Pkg!",
|
|
82
|
+
href: "https://www.npmjs.com/package/customizable-toast-notification",
|
|
83
|
+
variant: "link",
|
|
84
|
+
target: "_blank"
|
|
85
|
+
}
|
|
86
|
+
});
|
|
87
|
+
</script>
|
|
88
|
+
|
|
89
|
+
```
|
|
90
|
+
|
|
91
|
+
## π API Reference
|
|
92
|
+
|
|
93
|
+
### `createToast(options)`
|
|
94
|
+
|
|
95
|
+
Creates and displays a toast notification.
|
|
96
|
+
|
|
97
|
+
#### Options
|
|
98
|
+
|
|
99
|
+
| Parameter | Type | Default | Description |
|
|
100
|
+
| ------------------- | --------- | ----------------------- | --------------------------------------------------------- |
|
|
101
|
+
| `message` | `string` | Based on `type` | Toast message content |
|
|
102
|
+
| `type` | `string` | `"info"` | `"info"`, `"success"`, `"error"`, `"warning"` |
|
|
103
|
+
| `duration` | `number` | `3000` | Auto-dismiss time in milliseconds |
|
|
104
|
+
| `position` | `string` | `"bottom-right"` | Toast position on screen |
|
|
105
|
+
| `backgroundColor` | `string` | Based on `type` | Custom background color |
|
|
106
|
+
| `textColor` | `string` | `"white"` | Custom text color |
|
|
107
|
+
| `showCloseButton` | `boolean` | `false` | Show close (Γ) button |
|
|
108
|
+
| `showProgressBar` | `boolean` | `false` | Show countdown progress bar |
|
|
109
|
+
| `animationDuration` | `string` | `"0.5s"` | CSS animation duration |
|
|
110
|
+
| `animationEasing` | `string` | `"ease"` | CSS animation easing function |
|
|
111
|
+
| `progressColor` | `string` | `rgba(255,255,255,0.3)` | Progress bar color |
|
|
112
|
+
| `progressHeight` | `string` | `"4px"` | Progress bar height |
|
|
113
|
+
| `progressPosition` | `string` | `"bottom"` | Progress bar position: `"top"` or `"bottom"` |
|
|
114
|
+
| `pauseOnHover` | `boolean` | `auto` | Pause timer on hover (auto: true for CTA toasts) |
|
|
115
|
+
| `cta` | `object` | `null` | Call-to-action configuration (see [CTA](#call-to-action)) |
|
|
116
|
+
|
|
117
|
+
#### Position Options
|
|
118
|
+
|
|
119
|
+
```bash
|
|
120
|
+
// Corner positions
|
|
121
|
+
- "top-left", "top-right", "bottom-left", "bottom-right"
|
|
122
|
+
|
|
123
|
+
// Edge positions
|
|
124
|
+
- "top-center", "bottom-center", "left-center", "right-center"
|
|
125
|
+
|
|
126
|
+
// Full width
|
|
127
|
+
- "top-full-width", "bottom-full-width"
|
|
128
|
+
|
|
129
|
+
// Center
|
|
130
|
+
- "center"
|
|
131
|
+
|
|
132
|
+
```
|
|
133
|
+
|
|
134
|
+
## π― Call-to-Action (CTA)
|
|
135
|
+
|
|
136
|
+
Add interactive buttons or links to your toasts:
|
|
137
|
+
|
|
138
|
+
```bash
|
|
139
|
+
// Button CTA
|
|
140
|
+
createToast({
|
|
141
|
+
message: "File uploaded successfully!",
|
|
142
|
+
type: "success",
|
|
143
|
+
cta: {
|
|
144
|
+
label: "View File",
|
|
145
|
+
onClick: () => {
|
|
146
|
+
window.open('/files/latest');
|
|
147
|
+
},
|
|
148
|
+
autoClose: true // Close toast after click (default: true)
|
|
149
|
+
}
|
|
150
|
+
});
|
|
151
|
+
|
|
152
|
+
// Link CTA
|
|
153
|
+
createToast({
|
|
154
|
+
message: "New version available!",
|
|
155
|
+
cta: {
|
|
156
|
+
label: "Download",
|
|
157
|
+
href: "https://example.com/download",
|
|
158
|
+
variant: "link",
|
|
159
|
+
target: "_blank"
|
|
160
|
+
}
|
|
161
|
+
});
|
|
162
|
+
|
|
163
|
+
// Advanced CTA with async action
|
|
164
|
+
createToast({
|
|
165
|
+
message: "Ready to sync your data?",
|
|
166
|
+
cta: {
|
|
167
|
+
label: "Sync Now",
|
|
168
|
+
ariaLabel: "Start data synchronization",
|
|
169
|
+
autoClose: false,
|
|
170
|
+
onClick: async () => {
|
|
171
|
+
await performDataSync();
|
|
172
|
+
// Manually close if needed
|
|
173
|
+
}
|
|
174
|
+
}
|
|
175
|
+
});
|
|
176
|
+
|
|
177
|
+
```
|
|
178
|
+
|
|
179
|
+
### CTA Options
|
|
180
|
+
|
|
181
|
+
| Parameter | Type | Default | Description |
|
|
182
|
+
| ----------- | ---------- | ---------- | ------------------------------ |
|
|
183
|
+
| `label` | `string` | `required` | Button/link text |
|
|
184
|
+
| `onClick` | `function` | `null` | Click handler (for buttons) |
|
|
185
|
+
| `href` | `string` | `null` | URL (for links) |
|
|
186
|
+
| `variant` | `string` | `"button"` | `"button"` or `"link"` |
|
|
187
|
+
| `target` | `string` | `null` | Link target (`"_blank"`, etc.) |
|
|
188
|
+
| `rel` | `string` | `auto` | Link relationship |
|
|
189
|
+
| `autoClose` | `boolean` | `true` | Close toast after CTA click |
|
|
190
|
+
| `ariaLabel` | `string` | `label` | Accessibility label |
|
|
191
|
+
|
|
192
|
+
## π¨ Examples
|
|
193
|
+
|
|
194
|
+
### All Toast Types
|
|
195
|
+
|
|
196
|
+
### `setDefaultColors(colors)`
|
|
197
|
+
|
|
198
|
+
```bash
|
|
199
|
+
|
|
200
|
+
Configure default colors for toast types.
|
|
201
|
+
|
|
202
|
+
setDefaultColors({
|
|
203
|
+
success: "#10b981",
|
|
204
|
+
error: "#ef4444",
|
|
205
|
+
warning: "#f59e0b",
|
|
206
|
+
info: "#3b82f6"
|
|
207
|
+
});
|
|
208
|
+
|
|
209
|
+
```
|
|
210
|
+
|
|
211
|
+
### `setDefaultMessages(messages)`
|
|
212
|
+
|
|
213
|
+
```bash
|
|
214
|
+
Configure default messages for toast types.
|
|
215
|
+
|
|
216
|
+
setDefaultMessages({
|
|
217
|
+
success: "Operation completed successfully!",
|
|
218
|
+
error: "Something went wrong!",
|
|
219
|
+
warning: "Please check your input!",
|
|
220
|
+
info: "Here's some information!"
|
|
221
|
+
});
|
|
222
|
+
|
|
223
|
+
```
|
|
224
|
+
|
|
225
|
+
## π‘ Examples
|
|
226
|
+
|
|
227
|
+
### Basic Toast Types
|
|
228
|
+
|
|
229
|
+
```bash
|
|
230
|
+
// Success
|
|
231
|
+
createToast({ type: "success", message: "Data saved!" });
|
|
232
|
+
|
|
233
|
+
// Error
|
|
234
|
+
createToast({ type: "error", message: "Save failed!" });
|
|
235
|
+
|
|
236
|
+
// Warning
|
|
237
|
+
createToast({ type: "warning", message: "Please confirm!" });
|
|
238
|
+
|
|
239
|
+
// Info
|
|
240
|
+
createToast({ type: "info", message: "New update available!" });
|
|
241
|
+
|
|
242
|
+
```
|
|
243
|
+
|
|
244
|
+
### Advanced Customization
|
|
245
|
+
|
|
246
|
+
```bash
|
|
247
|
+
createToast({
|
|
248
|
+
message: "File uploading...",
|
|
249
|
+
type: "info",
|
|
250
|
+
duration: 5000,
|
|
251
|
+
position: "top-center",
|
|
252
|
+
showProgressBar: true,
|
|
253
|
+
showCloseButton: true,
|
|
254
|
+
backgroundColor: "#6366f1",
|
|
255
|
+
textColor: "white",
|
|
256
|
+
progressColor: "#e0e7ff",
|
|
257
|
+
progressPosition: "top",
|
|
258
|
+
animationDuration: "0.8s",
|
|
259
|
+
animationEasing: "ease-out"
|
|
260
|
+
});
|
|
261
|
+
|
|
262
|
+
### App-wide Configuration
|
|
263
|
+
|
|
264
|
+
// Set your brand colors once
|
|
265
|
+
setDefaultColors({
|
|
266
|
+
success: "#10b981", // Your brand green
|
|
267
|
+
error: "#ef4444", // Your brand red
|
|
268
|
+
warning: "#f59e0b", // Your brand yellow
|
|
269
|
+
info: "#3b82f6" // Your brand blue
|
|
270
|
+
});
|
|
271
|
+
|
|
272
|
+
// Set your app messages
|
|
273
|
+
setDefaultMessages({
|
|
274
|
+
success: "β
Success! Changes saved.",
|
|
275
|
+
error: "β Error! Please try again.",
|
|
276
|
+
warning: "β οΈ Warning! Check your input.",
|
|
277
|
+
info: "π‘ Info! Here's a tip."
|
|
278
|
+
});
|
|
279
|
+
|
|
280
|
+
// Now just use types throughout your app
|
|
281
|
+
createToast({ type: "success" }); // Uses your custom colors & messages
|
|
282
|
+
|
|
283
|
+
```
|
|
284
|
+
|
|
285
|
+
## π Advanced Features
|
|
286
|
+
|
|
287
|
+
### Smart Grouping
|
|
288
|
+
|
|
289
|
+
Identical toasts (same type, message, and position) are automatically grouped:
|
|
290
|
+
|
|
291
|
+
- Shows a single toast with a badge counter
|
|
292
|
+
- Resets the dismiss timer when new duplicates arrive
|
|
293
|
+
- Maximum of 3 toasts visible at once
|
|
294
|
+
|
|
295
|
+
### Queue Management
|
|
296
|
+
|
|
297
|
+
- Only 3 toasts are shown simultaneously
|
|
298
|
+
- Additional toasts are queued automatically
|
|
299
|
+
- Queue is processed as toasts are dismissed
|
|
300
|
+
|
|
301
|
+
### Accessibility
|
|
302
|
+
|
|
303
|
+
- ARIA live regions announce new toasts to screen readers
|
|
304
|
+
- Keyboard navigation support (Tab, Enter, Escape)
|
|
305
|
+
- High contrast badge design
|
|
306
|
+
- Semantic HTML structure
|
|
307
|
+
|
|
308
|
+
## π‘οΈ Reliability Features
|
|
309
|
+
|
|
310
|
+
### Production-Grade System
|
|
311
|
+
|
|
312
|
+
- \*\*Rich toast β Basic toast β Emergency alert
|
|
313
|
+
- **Zero-Crash Guarantee**: Comprehensive error handling prevents application crashes
|
|
314
|
+
- **Memory Management**: Automatic cleanup prevents memory leaks
|
|
315
|
+
- **CDN Cache-Busting**: Ensures fresh content delivery
|
|
316
|
+
|
|
317
|
+
### Browser Compatibility
|
|
318
|
+
|
|
319
|
+
- β
Chrome
|
|
320
|
+
- β
Firefox
|
|
321
|
+
- β
Safari
|
|
322
|
+
- β
Edge
|
|
323
|
+
- β
Mobile browsers
|
|
324
|
+
|
|
325
|
+
## π Bundle Information
|
|
326
|
+
|
|
327
|
+
- **Size**: ~8KB minified, ~4KB gzipped
|
|
328
|
+
- **Dependencies**: Zero
|
|
329
|
+
- **Formats**: UMD, ES Modules
|
|
330
|
+
- **TypeScript**: Definitions included (full coming soon)
|
|
331
|
+
|
|
332
|
+
## π€ Contributing
|
|
333
|
+
|
|
334
|
+
Exciting times ahead! Looking for sponsors and eager to explore new collaborations:) . Contributions are welcome! Please read our [Contributing Guidelines](CONTRIBUTING.md) for details.
|
|
335
|
+
|
|
336
|
+
### Development Setup
|
|
337
|
+
|
|
338
|
+
```bash
|
|
339
|
+
|
|
340
|
+
git clone https://github.com/sammy-cool/customizable-toast-notification.git
|
|
341
|
+
cd customizable-toast-notification
|
|
342
|
+
npm install
|
|
343
|
+
npm run build
|
|
344
|
+
|
|
345
|
+
```
|
|
346
|
+
|
|
347
|
+
## π License
|
|
348
|
+
|
|
349
|
+
This project is licensed under the [Apache-2.0 License](LICENSE).
|
|
350
|
+
|
|
351
|
+
## π¨βπ» Author
|
|
352
|
+
|
|
353
|
+
**Priyanshu Patel**
|
|
354
|
+
|
|
355
|
+
- π§ Email: priyanshu.alt191@gmail.com
|
|
356
|
+
- π GitHub: [@sammy-cool](https://github.com/sammy-cool)
|
|
357
|
+
|
|
358
|
+
---
|
|
359
|
+
|
|
360
|
+
## π Support
|
|
361
|
+
|
|
362
|
+
If this library helped your project, please consider:
|
|
363
|
+
|
|
364
|
+
β **Star this repository** to show your support!
|
|
365
|
+
|
|
366
|
+
π **Share feedback** at priyanshu.alt191@gmail.com
|
|
367
|
+
|
|
368
|
+
β **Buy me a coffee** if you'd like to support development:
|
|
369
|
+
|
|
370
|
+
- π PayPal: [paypal.me/priyanshupatel1](https://paypal.me/priyanshupatel1)
|
|
371
|
+
- π³ UPI: `eureka91@upi`
|
|
372
|
+
|
|
373
|
+
<details>
|
|
374
|
+
<summary>π± Support via QR Code</summary>
|
|
375
|
+
|
|
376
|
+
|
|
377
|
+
|
|
378
|
+
</details>
|
|
379
|
+
|
|
380
|
+
**Thank you for your support! π**
|
|
381
|
+
|
|
382
|
+
---
|
|
383
|
+
|
|
384
|
+
_Made with β€οΈ for the JavaScript community_
|