88
99> Simple elegant toast notifications.
1010
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),
1716it's only ** 19kb** minified (** 8kb** gzipped) and can be used in Vanilla JS, or as a Svelte
1817component.
1918
2019Because a demo helps better than a thousand API docs: https://zerodevx.github.io/svelte-toast/
2120
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-
3421## Usage
3522
3623Install the package:
@@ -42,7 +29,7 @@ $ npm i -D @zerodevx/svelte-toast
4229The following are exported:
4330
4431- ` SvelteToast ` as the toast container;
45- - ` toast ` as the toast emitter .
32+ - ` toast ` as the toast controller .
4633
4734### Svelte
4835
@@ -66,7 +53,7 @@ root layout.
6653<SvelteToast {options} />
6754```
6855
69- Use anywhere in your app - just import the toast emitter .
56+ Use anywhere in your app - just import the toast controller .
7057
7158` MyComponent.svelte ` :
7259
@@ -75,15 +62,16 @@ Use anywhere in your app - just import the toast emitter.
7562 import { toast } from ' @zerodevx/svelte-toast'
7663 </script >
7764
78- <button on:click ={() => toast.push('Hello world!')}>EMIT TOAST</button >
65+ <button on:click ={() => toast.push('Hello world!')}>SHOW TOAST</button >
7966```
8067
8168### Vanilla JS
8269
8370For any other application with a bundler, something like this should work:
8471
8572``` 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'
8775
8876const app = new SvelteToast ({
8977 // 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
348336</div >
349337```
350338
351- #### Removing Multiple Toasts
339+ #### Removing Multiple Toasts (Outdated)
352340
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 ) .
354344
355345``` js
356346// Remove all toasts from "new" container
357- toast .pop ((i ) => i .target !== ' new' )
347+ toast .pop ((i ) => i .target !== ' new' ) // DEPRECATED
358348
359349// Or remove ALL active toasts from ALL containers
360350toast .pop (0 )
@@ -470,11 +460,39 @@ or inline icons.
470460 }
471461 </script >
472462
473- <button on:click ={() => toast.push('Ping !')}>PONG </button >
463+ <button on:click ={() => toast.push('Hello !')}>SHOW TOAST </button >
474464
475465<SvelteToast {options} />
476466```
477467
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+
478496## Toast Options
479497
480498<!-- prettier-ignore -->
@@ -496,9 +514,26 @@ const options = {
496514## Toast Methods
497515
498516``` 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 ) { ... }
502537```
503538
504539## Development
@@ -509,7 +544,7 @@ applies.
509544
510545### Tests
511546
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:
513548
514549```
515550$ npm run test
0 commit comments