better-toast 0.0.4 → 0.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.
- package/README.md +101 -98
- package/fesm2022/better-toast.mjs +778 -510
- package/fesm2022/better-toast.mjs.map +1 -1
- package/package.json +4 -4
- package/types/better-toast.d.ts +43 -5
package/README.md
CHANGED
|
@@ -1,98 +1,101 @@
|
|
|
1
|
-
# Better Toast
|
|
2
|
-
|
|
3
|
-
[Better Toast](https://better-toast.vercel.app) is a toast notification library for **Angular**
|
|
4
|
-
|
|
5
|
-
**Requirements:** Angular `^21.0.0` (`@angular/core`, `@angular/common`).
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
```
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
|
38
|
-
|
|
|
39
|
-
| `
|
|
40
|
-
| `
|
|
41
|
-
| `
|
|
42
|
-
| `
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
@
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
- **
|
|
73
|
-
- **
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
1
|
+
# Better Toast
|
|
2
|
+
|
|
3
|
+
[Better Toast](https://better-toast.vercel.app) is a toast notification library for **Angular** 21 and 22: stacked messages, variants, swipe-to-dismiss, entry and exit animations, accessibility-friendly live region, and a small `ToasterService` API.
|
|
4
|
+
|
|
5
|
+
**Requirements:** Angular `^21.0.0 || ^22.0.0` (`@angular/core`, `@angular/common`).
|
|
6
|
+
|
|
7
|
+
**Support policy:** current Angular major plus the previous major. When Angular 23 is current, Angular 21 will be dropped.
|
|
8
|
+
|
|
9
|
+
## Documentation
|
|
10
|
+
|
|
11
|
+
You can find the full documentation on the [Better Toast](https://better-toast.vercel.app) website.
|
|
12
|
+
|
|
13
|
+
## Install
|
|
14
|
+
|
|
15
|
+
```bash
|
|
16
|
+
npm install better-toast
|
|
17
|
+
```
|
|
18
|
+
|
|
19
|
+
## Usage
|
|
20
|
+
|
|
21
|
+
Place a single `<better-toaster>` near the root of your app (for example in the root component) so the stack can render.
|
|
22
|
+
|
|
23
|
+
```typescript
|
|
24
|
+
import { Component } from '@angular/core';
|
|
25
|
+
import { BetterToaster } from 'better-toast';
|
|
26
|
+
|
|
27
|
+
@Component({
|
|
28
|
+
selector: 'app-root',
|
|
29
|
+
imports: [BetterToaster],
|
|
30
|
+
template: `<better-toaster />`,
|
|
31
|
+
})
|
|
32
|
+
export class App {}
|
|
33
|
+
```
|
|
34
|
+
|
|
35
|
+
Common inputs (all optional except using defaults):
|
|
36
|
+
|
|
37
|
+
| Input | Description |
|
|
38
|
+
| ------------------------- | ---------------------------------------------------------------------------------------------------------------------------------- |
|
|
39
|
+
| `duration` | Default auto-dismiss in ms for toasts that omit `durationMs` (also supports the literal `duration="Infinity"` for manual dismiss). |
|
|
40
|
+
| `position` | `top-left` \| `top-center` \| `top-right` \| `bottom-left` \| `bottom-center` \| `bottom-right` (default `bottom-right`). |
|
|
41
|
+
| `stacked` | When `true` (default), extra toasts collapse into a 3-layer card stack; hover, focus, or a press on touch expands the list. Set `false` to keep every toast fully visible. |
|
|
42
|
+
| `richColors` | When `true`, semantic background/border colors for success/error/info/warning. |
|
|
43
|
+
| `theme` | `light` \| `dark` \| `system` (default). |
|
|
44
|
+
| `closeButton` | Show per-toast dismiss control (default `true`). |
|
|
45
|
+
| `offset` / `mobileOffset` | Viewport inset for the stack (string or per-side object). |
|
|
46
|
+
|
|
47
|
+
Styles ship with the components; you do not need to import a separate CSS file for the default look.
|
|
48
|
+
|
|
49
|
+
## Show toasts from anywhere
|
|
50
|
+
|
|
51
|
+
Inject `ToasterService` and call the helpers. Each method returns a **toast id** you can pass to `dismiss(id)`.
|
|
52
|
+
|
|
53
|
+
```typescript
|
|
54
|
+
import { Component, inject } from '@angular/core';
|
|
55
|
+
import { ToasterService } from 'better-toast';
|
|
56
|
+
|
|
57
|
+
@Component({
|
|
58
|
+
selector: 'app-example',
|
|
59
|
+
template: `<button type="button" (click)="notify()">Save</button>`,
|
|
60
|
+
})
|
|
61
|
+
export class ExampleComponent {
|
|
62
|
+
private readonly toaster = inject(ToasterService);
|
|
63
|
+
|
|
64
|
+
notify(): void {
|
|
65
|
+
this.toaster.success('Saved successfully');
|
|
66
|
+
}
|
|
67
|
+
}
|
|
68
|
+
```
|
|
69
|
+
|
|
70
|
+
### Variants and helpers
|
|
71
|
+
|
|
72
|
+
- **Text:** `show`, `description`, `success`, `error`, `info`, `warning`, `loading`
|
|
73
|
+
- **Actions:** `action(message, { action: { label, onClick } })`, `cancel(message, { cancel: { label, onClick } })`
|
|
74
|
+
- **Custom UI:** `custom(Component, options)` (message area as a component), `headless(Component, options)` (full custom body, minimal chrome)
|
|
75
|
+
- **Async:** `promise(userPromise, { loading, success, error })` — one toast goes from loading → success/error
|
|
76
|
+
- **Control:** `dismiss(id)`, `clear()`
|
|
77
|
+
|
|
78
|
+
Example with options:
|
|
79
|
+
|
|
80
|
+
```typescript
|
|
81
|
+
this.toaster.error('Something went wrong', {
|
|
82
|
+
description: 'Try again in a few minutes.',
|
|
83
|
+
durationMs: 6000,
|
|
84
|
+
});
|
|
85
|
+
|
|
86
|
+
const id = this.toaster.loading('Working…');
|
|
87
|
+
// later:
|
|
88
|
+
this.toaster.dismiss(id);
|
|
89
|
+
```
|
|
90
|
+
|
|
91
|
+
Constants re-exported for typing and defaults include `DEFAULT_TOAST_DURATION_MS`, `TOAST_DURATION_MANUAL_DISMISS`, `TOAST_VARIANTS`, `TOASTER_POSITIONS`, and default ARIA label helpers.
|
|
92
|
+
|
|
93
|
+
## API surface
|
|
94
|
+
|
|
95
|
+
Everything is exported from the package entry point `better-toast`:
|
|
96
|
+
|
|
97
|
+
- **Component:** `BetterToaster` (selector `better-toaster`)
|
|
98
|
+
- **Service:** `ToasterService`
|
|
99
|
+
- **Types:** `ToastOptions`, `ToastVariant`, `ToasterPosition`, and the other types listed in the package’s `public-api.ts`
|
|
100
|
+
|
|
101
|
+
For full behavior (icons, headless mode, class names, accessibility labels), see the source and TSDoc under `projects/better-toast/src`.
|