d9-toast 1.4.35 → 2.5.35
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 +110 -106
- package/dist/Icons.js +18 -11
- package/dist/Toast.js +86 -101
- package/dist/ToastContext.js +172 -27
- package/dist/d9-toast.d.ts +231 -71
- package/dist/toast.css +168 -105
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -7,28 +7,31 @@
|
|
|
7
7
|
|
|
8
8
|
[](https://rzp.io/rzp/eVnJ0oP)
|
|
9
9
|
|
|
10
|
-
A **lightweight, fully typed,
|
|
10
|
+
A **lightweight, fully typed, production-ready toast notification library** for React — with **zero hooks required**.
|
|
11
11
|
|
|
12
12
|
---
|
|
13
13
|
|
|
14
14
|
## ✨ Features
|
|
15
15
|
|
|
16
16
|
* ⚡ **Lightweight & Fast** – Minimal bundle size
|
|
17
|
-
* 🔒 **100% TypeScript
|
|
17
|
+
* 🔒 **100% TypeScript** – Full IntelliSense & strict typing
|
|
18
18
|
* 🎨 **Themes** – Light, Dark & Colored
|
|
19
|
-
* 🔔 **Audio Support** –
|
|
20
|
-
* 🎯 **
|
|
21
|
-
* 🧩 **Action Buttons** –
|
|
19
|
+
* 🔔 **Audio Support** – Per-toast sounds with cooldown
|
|
20
|
+
* 🎯 **7 Positions** – Flexible placement
|
|
21
|
+
* 🧩 **Action Buttons** – Undo / Retry / CTA actions
|
|
22
22
|
* ⏱ **Auto / Manual Control**
|
|
23
|
+
* 🔄 **Promise Toasts** – Loading → Success / Error
|
|
24
|
+
* 📚 **Stack Depth Animations**
|
|
25
|
+
* 🔁 **Expand on Hover**
|
|
26
|
+
* 🔠 **RTL Text Support**
|
|
23
27
|
* 🧪 **No External Dependencies**
|
|
24
|
-
*
|
|
25
|
-
* 📱 **Responsive & Animated UI**
|
|
28
|
+
* 📱 **Responsive & Accessible**
|
|
26
29
|
|
|
27
30
|
---
|
|
28
31
|
|
|
29
32
|
## 📺 Demo
|
|
30
33
|
|
|
31
|
-
[
|
|
34
|
+
👉 [https://psathul073.github.io/d9-toast-docs/docs/examples/basic](https://psathul073.github.io/d9-toast-docs/docs/examples/basic)
|
|
32
35
|
|
|
33
36
|
---
|
|
34
37
|
|
|
@@ -48,13 +51,12 @@ yarn add d9-toast
|
|
|
48
51
|
|
|
49
52
|
## 🚀 Quick Start
|
|
50
53
|
|
|
51
|
-
### 1
|
|
54
|
+
### 1️⃣ Wrap your app with `ToastProvider`
|
|
52
55
|
|
|
53
56
|
```jsx
|
|
54
57
|
import { ToastProvider } from "d9-toast";
|
|
55
58
|
import "d9-toast/toast.css";
|
|
56
59
|
|
|
57
|
-
|
|
58
60
|
export default function Root() {
|
|
59
61
|
return (
|
|
60
62
|
<ToastProvider>
|
|
@@ -64,47 +66,44 @@ export default function Root() {
|
|
|
64
66
|
}
|
|
65
67
|
```
|
|
66
68
|
|
|
69
|
+
> ⚠️ Required **once** at app root
|
|
70
|
+
|
|
67
71
|
---
|
|
68
72
|
|
|
69
|
-
### 2
|
|
73
|
+
### 2️⃣ Trigger toasts anywhere (NO HOOKS)
|
|
70
74
|
|
|
71
75
|
```jsx
|
|
72
|
-
import {
|
|
76
|
+
import { toast } from "d9-toast";
|
|
73
77
|
|
|
74
|
-
|
|
75
|
-
const { showToast } = useToast();
|
|
76
|
-
|
|
77
|
-
return (
|
|
78
|
-
<button
|
|
79
|
-
onClick={() =>
|
|
80
|
-
showToast({
|
|
81
|
-
message: "Saved successfully!",
|
|
82
|
-
type: "success",
|
|
83
|
-
})
|
|
84
|
-
}
|
|
85
|
-
>
|
|
86
|
-
Show Toast
|
|
87
|
-
</button>
|
|
88
|
-
);
|
|
89
|
-
}
|
|
78
|
+
toast.success("Saved successfully!");
|
|
90
79
|
```
|
|
91
80
|
|
|
92
|
-
|
|
81
|
+
✅ Works inside
|
|
93
82
|
|
|
94
|
-
|
|
83
|
+
* components
|
|
84
|
+
* utils
|
|
85
|
+
* services
|
|
86
|
+
* async functions
|
|
95
87
|
|
|
96
|
-
|
|
88
|
+
---
|
|
89
|
+
|
|
90
|
+
## 📖 Toast API
|
|
97
91
|
|
|
98
92
|
```ts
|
|
99
|
-
|
|
93
|
+
import { toast } from "d9-toast";
|
|
100
94
|
```
|
|
101
95
|
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
|
105
|
-
|
|
|
106
|
-
| `
|
|
107
|
-
| `
|
|
96
|
+
### Available Methods
|
|
97
|
+
|
|
98
|
+
| Method | Description |
|
|
99
|
+
| ------------------------------------------- | ------------------- |
|
|
100
|
+
| `toast.success(msg, options)` | Show success toast |
|
|
101
|
+
| `toast.error(msg, options)` | Show error toast |
|
|
102
|
+
| `toast.info(msg, options)` | Show info toast |
|
|
103
|
+
| `toast.warning(msg, options)` | Show warning toast |
|
|
104
|
+
| `toast.promise(promise, messages, options)` | Promise-based toast |
|
|
105
|
+
| `toast.dismiss(id)` | Remove toast |
|
|
106
|
+
| `toast.dismissAll()` | Clear all toasts |
|
|
108
107
|
|
|
109
108
|
---
|
|
110
109
|
|
|
@@ -112,43 +111,43 @@ const { sounds, showToast, removeToast, removeToastAll } = useToast();
|
|
|
112
111
|
|
|
113
112
|
### Core Options
|
|
114
113
|
|
|
115
|
-
| Option | Type
|
|
116
|
-
| ------------------ |
|
|
117
|
-
| `message` | `string \| ReactNode`
|
|
118
|
-
| `type` | `"success" \| "error" \| "info" \| "warning" \| "loading" \| "submit"`
|
|
119
|
-
| `theme` | `"light" \| "dark" \| "colored"`
|
|
120
|
-
| `position` | `"top-right" \|
|
|
121
|
-
| `duration` | `number`
|
|
122
|
-
| `autoClose` | `boolean`
|
|
123
|
-
| `closable` | `boolean`
|
|
124
|
-
| `progress` | `boolean`
|
|
125
|
-
| `title` | `boolean`
|
|
126
|
-
| `pauseOnHover` | `boolean`
|
|
127
|
-
| `pauseOnFocusLoss` | `boolean`
|
|
128
|
-
| `
|
|
114
|
+
| Option | Type | Description |
|
|
115
|
+
| ------------------ | -------------------------------------------------------------------------------------------------- | --------------------------- |
|
|
116
|
+
| `message` | `string \| ReactNode` | Toast content |
|
|
117
|
+
| `type` | `"success" \| "error" \| "info" \| "warning" \| "loading" \| "submit"` | Visual type |
|
|
118
|
+
| `theme` | `"light" \| "dark" \| "colored"` | Theme |
|
|
119
|
+
| `position` | `"top-right" \| top-left \| bottom-right \| bottom-left \| center \| center-top \| center-bottom"` | Placement |
|
|
120
|
+
| `duration` | `number` | Auto close (0 = persistent) |
|
|
121
|
+
| `autoClose` | `boolean` | Enable auto close |
|
|
122
|
+
| `closable` | `boolean` | Show close button |
|
|
123
|
+
| `progress` | `boolean` | Progress bar |
|
|
124
|
+
| `title` | `boolean` | Header/title |
|
|
125
|
+
| `pauseOnHover` | `boolean` | Pause on hover |
|
|
126
|
+
| `pauseOnFocusLoss` | `boolean` | Pause on tab switch |
|
|
127
|
+
| `rtl` | `boolean` | RTL text support |
|
|
128
|
+
| `expand` | `boolean \| "hover"` | Expand stacked toasts |
|
|
129
|
+
| `className` | `string` | Custom styles |
|
|
129
130
|
|
|
130
131
|
---
|
|
131
132
|
|
|
132
|
-
|
|
133
|
+
## 🔘 Action Buttons
|
|
133
134
|
|
|
134
135
|
```ts
|
|
135
136
|
actions?: {
|
|
136
137
|
text: string;
|
|
137
138
|
className?: string;
|
|
138
|
-
callback?: (toast: { id:
|
|
139
|
+
callback?: (toast: { id: string }) => void;
|
|
139
140
|
}[];
|
|
140
141
|
```
|
|
141
142
|
|
|
142
|
-
|
|
143
|
+
### Example
|
|
143
144
|
|
|
144
145
|
```jsx
|
|
145
|
-
|
|
146
|
-
showToast({
|
|
147
|
-
message: "File uploaded",
|
|
146
|
+
toast.success("File uploaded", {
|
|
148
147
|
actions: [
|
|
149
148
|
{
|
|
150
149
|
text: "Undo",
|
|
151
|
-
callback: ({ id }) =>
|
|
150
|
+
callback: ({ id }) => toast.dismiss(id),
|
|
152
151
|
},
|
|
153
152
|
],
|
|
154
153
|
});
|
|
@@ -156,14 +155,33 @@ showToast({
|
|
|
156
155
|
|
|
157
156
|
---
|
|
158
157
|
|
|
159
|
-
##
|
|
158
|
+
## 🔄 Promise Toasts (NEW)
|
|
159
|
+
|
|
160
|
+
```jsx
|
|
161
|
+
toast.promise(
|
|
162
|
+
fetch("/api/save"),
|
|
163
|
+
{
|
|
164
|
+
loading: "Saving...",
|
|
165
|
+
success: "Saved successfully!",
|
|
166
|
+
error: "Failed to save",
|
|
167
|
+
}
|
|
168
|
+
);
|
|
169
|
+
```
|
|
170
|
+
|
|
171
|
+
✔ Auto loading
|
|
172
|
+
✔ Auto update
|
|
173
|
+
✔ Returns original promise
|
|
174
|
+
|
|
175
|
+
---
|
|
176
|
+
|
|
177
|
+
## 🔊 Audio Support
|
|
160
178
|
|
|
161
179
|
### Audio Options
|
|
162
180
|
|
|
163
181
|
```ts
|
|
164
182
|
audio?: {
|
|
165
183
|
enabled?: boolean;
|
|
166
|
-
volume?: number; // 0
|
|
184
|
+
volume?: number; // 0–1
|
|
167
185
|
audioFile?: string;
|
|
168
186
|
cooldown?: number; // ms
|
|
169
187
|
};
|
|
@@ -171,63 +189,52 @@ audio?: {
|
|
|
171
189
|
|
|
172
190
|
### Example
|
|
173
191
|
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
cooldown: 500,
|
|
184
|
-
audioFile: sounds.success,
|
|
185
|
-
},
|
|
186
|
-
});
|
|
187
|
-
```
|
|
192
|
+
```jsx
|
|
193
|
+
toast.success("Message sent", {
|
|
194
|
+
audio: {
|
|
195
|
+
enabled: true,
|
|
196
|
+
volume: 0.8,
|
|
197
|
+
audioFile: toast.sounds.success,
|
|
198
|
+
},
|
|
199
|
+
});
|
|
200
|
+
```
|
|
188
201
|
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
202
|
+
✔ Per-toast control
|
|
203
|
+
✔ Cooldown prevents spam
|
|
204
|
+
✔ Custom sound support
|
|
192
205
|
|
|
193
206
|
---
|
|
194
207
|
|
|
195
208
|
## 🎨 Styling
|
|
196
209
|
|
|
197
|
-
|
|
198
|
-
Import the default styles once in your app:
|
|
210
|
+
### Required
|
|
199
211
|
|
|
200
212
|
```js
|
|
201
213
|
import "d9-toast/toast.css";
|
|
202
214
|
```
|
|
203
215
|
|
|
204
|
-
### Tailwind
|
|
216
|
+
### Tailwind Example
|
|
205
217
|
|
|
206
218
|
```jsx
|
|
207
|
-
|
|
208
|
-
message: "Styled Toast",
|
|
219
|
+
toast.success("Styled Toast", {
|
|
209
220
|
className:
|
|
210
221
|
"!bg-gradient-to-r from-indigo-600 to-purple-600 !text-white !rounded-xl",
|
|
211
222
|
});
|
|
212
223
|
```
|
|
213
224
|
|
|
214
|
-
> ⚠️ Use `!important`
|
|
225
|
+
> ⚠️ Use `!important` for Tailwind overrides
|
|
215
226
|
|
|
216
227
|
---
|
|
217
228
|
|
|
218
|
-
## 🧠 Advanced
|
|
229
|
+
## 🧠 Advanced
|
|
219
230
|
|
|
220
231
|
### Persistent Toast
|
|
221
232
|
|
|
222
233
|
```jsx
|
|
223
|
-
const id =
|
|
224
|
-
message: "Loading...",
|
|
225
|
-
type: "loading",
|
|
226
|
-
duration: 0,
|
|
227
|
-
});
|
|
234
|
+
const id = toast.info("Processing...", { duration: 0 });
|
|
228
235
|
|
|
229
236
|
// later
|
|
230
|
-
|
|
237
|
+
toast.dismiss(id);
|
|
231
238
|
```
|
|
232
239
|
|
|
233
240
|
---
|
|
@@ -235,29 +242,25 @@ removeToast(id);
|
|
|
235
242
|
### JSX Content
|
|
236
243
|
|
|
237
244
|
```jsx
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
),
|
|
245
|
-
});
|
|
245
|
+
toast.info(
|
|
246
|
+
<div>
|
|
247
|
+
<strong>Custom JSX</strong>
|
|
248
|
+
<p>Supports React nodes</p>
|
|
249
|
+
</div>
|
|
250
|
+
);
|
|
246
251
|
```
|
|
247
252
|
|
|
248
253
|
---
|
|
249
254
|
|
|
250
255
|
## 🧾 TypeScript Support
|
|
251
256
|
|
|
252
|
-
D9-Toast ships with **full TypeScript definitions**:
|
|
253
|
-
|
|
254
257
|
```ts
|
|
255
258
|
import type { ToastOptions, ToastType } from "d9-toast";
|
|
256
259
|
```
|
|
257
260
|
|
|
258
|
-
✔ IntelliSense
|
|
261
|
+
✔ Full IntelliSense
|
|
259
262
|
✔ Strict typing
|
|
260
|
-
✔
|
|
263
|
+
✔ Zero `any`
|
|
261
264
|
|
|
262
265
|
---
|
|
263
266
|
|
|
@@ -275,6 +278,7 @@ MIT © **Athul / D9 Coder**
|
|
|
275
278
|
|
|
276
279
|
## 🔗 Links
|
|
277
280
|
|
|
278
|
-
* 🐞 [
|
|
279
|
-
* 💻
|
|
280
|
-
* 📦
|
|
281
|
+
* 🐞 Issues: [https://github.com/psathul073/d9-toast/issues](https://github.com/psathul073/d9-toast/issues)
|
|
282
|
+
* 💻 Source: [https://github.com/psathul073/d9-toast](https://github.com/psathul073/d9-toast)
|
|
283
|
+
* 📦 npm: [https://www.npmjs.com/package/d9-toast](https://www.npmjs.com/package/d9-toast)
|
|
284
|
+
|
package/dist/Icons.js
CHANGED
|
@@ -11,16 +11,19 @@ var Icons = function Icons(_ref) {
|
|
|
11
11
|
success: /*#__PURE__*/_jsx("svg", {
|
|
12
12
|
xmlns: "http://www.w3.org/2000/svg",
|
|
13
13
|
viewBox: "0 0 24 24",
|
|
14
|
-
width: "
|
|
15
|
-
height: "
|
|
14
|
+
width: "1em",
|
|
15
|
+
height: "1em",
|
|
16
16
|
className: className,
|
|
17
17
|
style: {
|
|
18
|
+
fontSize: "20px",
|
|
18
19
|
backgroundColor: "transparent",
|
|
19
20
|
flexShrink: 0
|
|
20
21
|
},
|
|
21
22
|
children: /*#__PURE__*/_jsx("path", {
|
|
22
23
|
fill: "currentColor",
|
|
23
|
-
|
|
24
|
+
fillRule: "evenodd",
|
|
25
|
+
d: "M12 1.25C6.063 1.25 1.25 6.063 1.25 12S6.063 22.75 12 22.75S22.75 17.937 22.75 12S17.937 1.25 12 1.25M7.53 11.97a.75.75 0 0 0-1.06 1.06l3 3a.75.75 0 0 0 1.06 0l7-7a.75.75 0 0 0-1.06-1.06L10 14.44z",
|
|
26
|
+
clipRule: "evenodd"
|
|
24
27
|
})
|
|
25
28
|
}),
|
|
26
29
|
error: /*#__PURE__*/_jsx("svg", {
|
|
@@ -31,7 +34,7 @@ var Icons = function Icons(_ref) {
|
|
|
31
34
|
className: className,
|
|
32
35
|
style: {
|
|
33
36
|
backgroundColor: "transparent",
|
|
34
|
-
fontSize: "
|
|
37
|
+
fontSize: "20px",
|
|
35
38
|
flexShrink: 0
|
|
36
39
|
},
|
|
37
40
|
children: /*#__PURE__*/_jsx("path", {
|
|
@@ -47,12 +50,14 @@ var Icons = function Icons(_ref) {
|
|
|
47
50
|
className: className,
|
|
48
51
|
style: {
|
|
49
52
|
backgroundColor: "transparent",
|
|
50
|
-
fontSize: "
|
|
53
|
+
fontSize: "20px",
|
|
51
54
|
flexShrink: 0
|
|
52
55
|
},
|
|
53
56
|
children: /*#__PURE__*/_jsx("path", {
|
|
54
57
|
fill: "currentColor",
|
|
55
|
-
|
|
58
|
+
fillRule: "evenodd",
|
|
59
|
+
d: "M12 1C5.925 1 1 5.925 1 12s4.925 11 11 11s11-4.925 11-11S18.075 1 12 1m-.5 5a1 1 0 1 0 0 2h.5a1 1 0 1 0 0-2zM10 10a1 1 0 1 0 0 2h1v3h-1a1 1 0 1 0 0 2h4a1 1 0 1 0 0-2h-1v-4a1 1 0 0 0-1-1z",
|
|
60
|
+
clipRule: "evenodd"
|
|
56
61
|
})
|
|
57
62
|
}),
|
|
58
63
|
warning: /*#__PURE__*/_jsx("svg", {
|
|
@@ -63,12 +68,14 @@ var Icons = function Icons(_ref) {
|
|
|
63
68
|
className: className,
|
|
64
69
|
style: {
|
|
65
70
|
backgroundColor: "transparent",
|
|
66
|
-
fontSize: "
|
|
71
|
+
fontSize: "20px",
|
|
67
72
|
flexShrink: 0
|
|
68
73
|
},
|
|
69
74
|
children: /*#__PURE__*/_jsx("path", {
|
|
70
75
|
fill: "currentColor",
|
|
71
|
-
|
|
76
|
+
fillRule: "evenodd",
|
|
77
|
+
d: "M9.616 3.642c1.058-1.839 3.71-1.839 4.768 0l8.043 13.988c1.054 1.833-.27 4.12-2.384 4.12H3.957c-2.115 0-3.438-2.287-2.384-4.12zM12 8.25a.75.75 0 0 1 .75.75v4a.75.75 0 0 1-1.5 0V9a.75.75 0 0 1 .75-.75m.568 9.25a.75.75 0 0 0-1.115-1.003l-.01.011a.75.75 0 0 0 1.114 1.004z",
|
|
78
|
+
clipRule: "evenodd"
|
|
72
79
|
})
|
|
73
80
|
}),
|
|
74
81
|
loading: /*#__PURE__*/_jsx("svg", {
|
|
@@ -79,7 +86,7 @@ var Icons = function Icons(_ref) {
|
|
|
79
86
|
className: className,
|
|
80
87
|
style: {
|
|
81
88
|
backgroundColor: "transparent",
|
|
82
|
-
fontSize: "
|
|
89
|
+
fontSize: "20px",
|
|
83
90
|
flexShrink: 0
|
|
84
91
|
},
|
|
85
92
|
children: /*#__PURE__*/_jsxs("g", {
|
|
@@ -126,7 +133,7 @@ var Icons = function Icons(_ref) {
|
|
|
126
133
|
className: className,
|
|
127
134
|
style: {
|
|
128
135
|
backgroundColor: "transparent",
|
|
129
|
-
fontSize: "
|
|
136
|
+
fontSize: "20px",
|
|
130
137
|
flexShrink: 0
|
|
131
138
|
},
|
|
132
139
|
children: /*#__PURE__*/_jsxs("g", {
|
|
@@ -189,7 +196,7 @@ var Icons = function Icons(_ref) {
|
|
|
189
196
|
className: className,
|
|
190
197
|
style: {
|
|
191
198
|
backgroundColor: "transparent",
|
|
192
|
-
fontSize: "
|
|
199
|
+
fontSize: "20px",
|
|
193
200
|
flexShrink: 0
|
|
194
201
|
},
|
|
195
202
|
children: /*#__PURE__*/_jsxs("g", {
|