8
8
9
9
> Simple elegant toast notifications.
10
10
11
- A lightweight, unopinionated and performant toast notification component for modern web frontends in
12
- [ very] ( https://github.com/zerodevx/svelte-toast/blob/master/src/SvelteToast.svelte )
13
- [ little] ( https://github.com/zerodevx/svelte-toast/blob/master/src/ToastItem.svelte )
14
- [ lines] ( https://github.com/zerodevx/svelte-toast/blob/master/src/stores.js )
15
- [ of] ( https://github.com/zerodevx/svelte-toast/blob/master/src/index.js )
16
- [ code] ( https://github.com/zerodevx/svelte-toast/blob/master/src/index.d.ts ) . Compiled (into UMD),
11
+ A feather-light and well-tested toast notification component for modern web frontends in
12
+ [ very] ( https://github.com/zerodevx/svelte-toast/blob/master/src/lib/SvelteToast.svelte )
13
+ [ little] ( https://github.com/zerodevx/svelte-toast/blob/master/src/lib/ToastItem.svelte )
14
+ [ lines] ( https://github.com/zerodevx/svelte-toast/blob/master/src/lib/stores.js ) of
15
+ [ code] ( https://github.com/zerodevx/svelte-toast/blob/master/src/lib/index.js ) . Compiled (into UMD),
17
16
it's only ** 19kb** minified (** 8kb** gzipped) and can be used in Vanilla JS, or as a Svelte
18
17
component.
19
18
20
19
Because a demo helps better than a thousand API docs: https://zerodevx.github.io/svelte-toast/
21
20
22
- ** :warning : IMPORTANT NOTICE!**
23
-
24
- If you're using the latest SvelteKit, install this component with the ` @next ` tag:
25
-
26
- ```
27
- $ npm i --save-exact @zerodevx/svelte-toast@next
28
- ```
29
-
30
- That's because of a [ breaking change] ( https://github.com/sveltejs/kit/pull/7489 ) that landed in
31
- SvelteKit. Background of the issue [ here] ( https://github.com/zerodevx/svelte-toast/issues/60 ) . Track
32
- progress as we work towards ` v1 ` [ here] ( https://github.com/zerodevx/svelte-toast/pull/63 ) .
33
-
34
21
## Usage
35
22
36
23
Install the package:
@@ -42,7 +29,7 @@ $ npm i -D @zerodevx/svelte-toast
42
29
The following are exported:
43
30
44
31
- ` SvelteToast ` as the toast container;
45
- - ` toast ` as the toast emitter .
32
+ - ` toast ` as the toast controller .
46
33
47
34
### Svelte
48
35
@@ -66,7 +53,7 @@ root layout.
66
53
<SvelteToast {options} />
67
54
```
68
55
69
- Use anywhere in your app - just import the toast emitter .
56
+ Use anywhere in your app - just import the toast controller .
70
57
71
58
` MyComponent.svelte ` :
72
59
@@ -75,15 +62,16 @@ Use anywhere in your app - just import the toast emitter.
75
62
import { toast } from ' @zerodevx/svelte-toast'
76
63
</script >
77
64
78
- <button on:click ={() => toast.push('Hello world!')}>EMIT TOAST</button >
65
+ <button on:click ={() => toast.push('Hello world!')}>SHOW TOAST</button >
79
66
```
80
67
81
68
### Vanilla JS
82
69
83
70
For any other application with a bundler, something like this should work:
84
71
85
72
``` js
86
- import { SvelteToast , toast } from ' @zerodevx/svelte-toast'
73
+ // Import the compiled code from `/dist`
74
+ import { SvelteToast , toast } from ' @zerodevx/svelte-toast/dist'
87
75
88
76
const app = new SvelteToast ({
89
77
// Set where the toast container should be appended into
@@ -348,13 +336,15 @@ It's now easy to send toasts to different container targets within your app. For
348
336
</div >
349
337
```
350
338
351
- #### Removing Multiple Toasts
339
+ #### Removing Multiple Toasts (Outdated)
352
340
353
- ` pop() ` now accepts a filter function.
341
+ ~~ ` pop() ` now accepts a filter function.~~ This has been deprecated, but will remain for backward
342
+ compatibility until the next major. The recommended way to remove all toasts from a container target
343
+ [ has changed from ` v0.9 ` ] ( #removing-multiple-toasts ) .
354
344
355
345
``` js
356
346
// Remove all toasts from "new" container
357
- toast .pop ((i ) => i .target !== ' new' )
347
+ toast .pop ((i ) => i .target !== ' new' ) // DEPRECATED
358
348
359
349
// Or remove ALL active toasts from ALL containers
360
350
toast .pop (0 )
@@ -470,11 +460,39 @@ or inline icons.
470
460
}
471
461
</script >
472
462
473
- <button on:click ={() => toast.push('Ping !')}>PONG </button >
463
+ <button on:click ={() => toast.push('Hello !')}>SHOW TOAST </button >
474
464
475
465
<SvelteToast {options} />
476
466
```
477
467
468
+ ### New from ` v0.9 `
469
+
470
+ #### Removing Multiple Toasts
471
+
472
+ Removing all toasts from a particular container target has just become more _ targeted_ . Simply call
473
+ ` pop() ` with param ` { target: 'containerName' } ` , or call ` pop(0) ` to clear everything.
474
+
475
+ ``` js
476
+ // Remove all toasts from "new" container
477
+ toast .pop ({ target: ' new' })
478
+
479
+ // Or remove ALL active toasts from ALL containers
480
+ toast .pop (0 )
481
+ ```
482
+
483
+ #### Big Tooling Upgrade
484
+
485
+ Under the hood, the project's been migrated to
486
+ [ ` svelte-package ` ] ( https://github.com/sveltejs/kit/tree/master/packages/package ) . For Svelte
487
+ consumers, this helps keep in sync with breaking changes that happen in Svelte-world. For other
488
+ consumers, there's a change in import path:
489
+
490
+ ``` js
491
+ // Import the compiled code.
492
+ import { toast , SvelteToast } from ' @zerodevx/svelte-toast/dist' // ESM
493
+ const { toast , SvelteToast } = require (' @zerodevx/svelte-toast/dist' ) // CJS
494
+ ```
495
+
478
496
## Toast Options
479
497
480
498
<!-- prettier-ignore -->
@@ -496,9 +514,26 @@ const options = {
496
514
## Toast Methods
497
515
498
516
``` js
499
- const id = toast .push (msg, { ... options })
500
- toast .pop (id || fn || undefined )
501
- toast .set (id, { ... options })
517
+ /**
518
+ * Send a new toast
519
+ * @param {(string|SvelteToastOptions)} msg
520
+ * @param {SvelteToastOptions} [opts]
521
+ * @returns {number}
522
+ */
523
+ function push (msg , opts ) { ... }
524
+
525
+ /**
526
+ * Remove toast(s)
527
+ * @param {(number|Object.<'target', string>)} [id]
528
+ */
529
+ function pop (id ) { ... }
530
+
531
+ /**
532
+ * Update an existing toast
533
+ * @param {(number|SvelteToastOptions)} id
534
+ * @param {SvelteToastOptions} [opts]
535
+ */
536
+ function set (id , opts ) { ... }
502
537
```
503
538
504
539
## Development
@@ -509,7 +544,7 @@ applies.
509
544
510
545
### Tests
511
546
512
- Testing is through [ Cypress ] ( https://www.cypress.io / ) . To run the tests headlessly:
547
+ Testing is through [ Playwright ] ( https://playwright.dev / ) . To run the tests headlessly:
513
548
514
549
```
515
550
$ npm run test
0 commit comments