react-toast-msg 1.6.0 → 2.0.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 +92 -33
- package/dist/react-toast-msg.css +1 -1
- package/dist/react-toast-msg.es.js +146 -137
- package/dist/react-toast-msg.umd.js +4 -4
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,70 +1,129 @@
|
|
|
1
|
-
#
|
|
1
|
+
# React Toast MSG - (SudhuCodes)
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
A lightweight and customizable React toast notification library.
|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
|
|
6
|
+
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
|
|
10
|
+
---
|
|
11
|
+
|
|
12
|
+
|
|
6
13
|
|
|
7
14
|
## Features
|
|
8
15
|
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
-
|
|
16
|
+
| Feature | Description |
|
|
17
|
+
| ---------------------- | -------------------------------------------- |
|
|
18
|
+
| Lightweight and fast | Minimal dependency and highly performant |
|
|
19
|
+
| Zero configuration | Works instantly with default settings |
|
|
20
|
+
| Custom auto-close time | Set duration per toast dynamically |
|
|
21
|
+
| Multiple toast types | success, error, warning, default |
|
|
22
|
+
| React 18+ support | Fully compatible with React 18 and above |
|
|
23
|
+
| Easy styling | Customize with simple CSS or utility classes |
|
|
24
|
+
|
|
25
|
+
---
|
|
14
26
|
|
|
15
27
|
## Installation
|
|
16
28
|
|
|
17
29
|
```bash
|
|
18
|
-
npm
|
|
30
|
+
npm i react-toast-msg
|
|
19
31
|
```
|
|
20
32
|
|
|
33
|
+
---
|
|
34
|
+
|
|
21
35
|
## Usage
|
|
22
36
|
|
|
23
|
-
### 1. Add
|
|
37
|
+
### 1. Add `ToastContainer` at the root of your application:
|
|
24
38
|
|
|
25
39
|
```jsx
|
|
26
|
-
import {
|
|
40
|
+
import { toast, ToastContainer } from 'react-toast-msg';
|
|
41
|
+
import 'react-toast-msg/dist/react-toast-msg.css';
|
|
27
42
|
|
|
28
|
-
function
|
|
43
|
+
export default function Example() {
|
|
29
44
|
return (
|
|
30
45
|
<>
|
|
31
46
|
<ToastContainer />
|
|
32
|
-
|
|
33
|
-
<button onClick={() => toast
|
|
47
|
+
|
|
48
|
+
<button onClick={() => toast('Default toast')}>Default</button>
|
|
49
|
+
<button onClick={() => toast.success('Success toast')}>Success</button>
|
|
50
|
+
<button onClick={() => toast.error('Error toast')}>Error</button>
|
|
51
|
+
<button onClick={() => toast.warning('Warning toast')}>Warning</button>
|
|
34
52
|
</>
|
|
35
53
|
);
|
|
36
54
|
}
|
|
37
55
|
```
|
|
38
56
|
|
|
39
|
-
|
|
57
|
+
---
|
|
40
58
|
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
toast.
|
|
59
|
+
## Custom Auto-Close Duration
|
|
60
|
+
|
|
61
|
+
You can now define a custom timeout per toast.
|
|
62
|
+
|
|
63
|
+
| Usage Example | Description |
|
|
64
|
+
| -------------------------------- | ------------------------------------ |
|
|
65
|
+
| `toast('Message', 1000)` | Closes after 1000ms (1 second) |
|
|
66
|
+
| `toast.success('Saved', 5000)` | Success toast closes after 5 seconds |
|
|
67
|
+
| `toast('Text', 'success', 2000)` | Type + duration together |
|
|
68
|
+
|
|
69
|
+
> Note: Duration is in milliseconds and default value is 3000ms
|
|
70
|
+
|
|
71
|
+
### Example:
|
|
72
|
+
|
|
73
|
+
```jsx
|
|
74
|
+
<button onClick={() => toast('This will close in 1 second', 1000)}>
|
|
75
|
+
Show 1s Toast
|
|
76
|
+
</button>
|
|
44
77
|
|
|
45
|
-
|
|
78
|
+
<button onClick={() => toast.success('Success - 5s', 5000)}>
|
|
79
|
+
Show 5s Success Toast
|
|
80
|
+
</button>
|
|
46
81
|
```
|
|
47
82
|
|
|
48
|
-
|
|
83
|
+
---
|
|
49
84
|
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
|
85
|
+
## ToastContainer Props
|
|
86
|
+
|
|
87
|
+
| Prop | Type | Default | Description |
|
|
88
|
+
| --------- | ------ | ------- | ------------------------------------------------- |
|
|
89
|
+
| autoClose | number | 3000 | Default close time in milliseconds for all toasts |
|
|
90
|
+
|
|
91
|
+
Usage:
|
|
92
|
+
|
|
93
|
+
```jsx
|
|
94
|
+
<ToastContainer autoClose={5000} /> // Default 5-second timeout
|
|
95
|
+
```
|
|
96
|
+
|
|
97
|
+
---
|
|
98
|
+
|
|
99
|
+
## Available Toast Variants
|
|
100
|
+
|
|
101
|
+
```js
|
|
102
|
+
toast('Default message');
|
|
103
|
+
toast.success('Success message');
|
|
104
|
+
toast.error('Error occurred');
|
|
105
|
+
toast.warning('Warning message');
|
|
106
|
+
```
|
|
107
|
+
|
|
108
|
+
---
|
|
53
109
|
|
|
54
110
|
## Contributing
|
|
55
111
|
|
|
56
|
-
|
|
112
|
+
Contributions are welcome. You can:
|
|
113
|
+
|
|
114
|
+
- Report issues
|
|
115
|
+
- Suggest features
|
|
116
|
+
- Submit pull requests
|
|
117
|
+
- Improve documentation or code quality
|
|
118
|
+
|
|
119
|
+
Repository: [https://github.com/sudhucodes/react-toast-msg](https://github.com/sudhucodes/react-toast-msg)
|
|
57
120
|
|
|
58
|
-
|
|
59
|
-
- Improve performance or accessibility
|
|
60
|
-
- Fix bugs
|
|
61
|
-
- Refactor code or improve documentation
|
|
121
|
+
---
|
|
62
122
|
|
|
63
|
-
|
|
123
|
+
## License
|
|
64
124
|
|
|
65
|
-
|
|
125
|
+
react-toast-msg is [MIT licensed](./LICENSE).
|
|
66
126
|
|
|
67
|
-
|
|
127
|
+
---
|
|
68
128
|
|
|
69
|
-
|
|
70
|
-
- [npm Package](https://www.npmjs.com/package/react-toast-msg)
|
|
129
|
+
<p align="center"> <sub>© 2025 SudhuCodes — All rights reserved.</sub> </p>
|
package/dist/react-toast-msg.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
:root{--default-bg-color: oklch(27.8% .033 256.848);--default-text-color: #fff;--success-bg-color: oklch(72.3% .219 149.579);--success-text-color: #fff;--error-bg-color: oklch(63.7% .237 25.331);--error-text-color: #fff;--warning-bg-color: oklch(79.5% .184 86.047);--warning-text-color: #fff}*{margin:0;padding:0;box-sizing:border-box}.toast-container{position:fixed;font-family:sans-serif;top:
|
|
1
|
+
:root{--default-bg-color: oklch(27.8% .033 256.848);--default-text-color: #fff;--success-bg-color: oklch(72.3% .219 149.579);--success-text-color: #fff;--error-bg-color: oklch(63.7% .237 25.331);--error-text-color: #fff;--warning-bg-color: oklch(79.5% .184 86.047);--warning-text-color: #fff}*{margin:0;padding:0;box-sizing:border-box}.toast-container{position:fixed;font-family:sans-serif;top:1.5rem;right:1.5rem;display:flex;flex-direction:column;align-items:flex-end;gap:10px;z-index:9999}.toast{display:flex;align-items:center;gap:8px;background:#0f172b;color:#fff;padding:12px;font-size:14px;border-radius:8px;min-width:200px;max-width:300px;will-change:transform,opacity}.toast svg{flex-shrink:0}.toast-enter{animation:toastEnter .45s cubic-bezier(.21,1.02,.73,1) forwards}.toast-exit{animation:toastExit .4s cubic-bezier(.06,.71,.55,1) forwards}.toast-success{background:var(--success-bg-color)}.toast-error{background:var(--error-bg-color)}.toast-warning{background:var(--warning-bg-color)}@keyframes toastEnter{0%{opacity:0;transform:translate(20px)}60%{opacity:1;transform:translate(-2px)}to{opacity:1;transform:translate(0)}}@keyframes toastExit{0%{opacity:1;transform:translate(0)}to{opacity:0;transform:translate(20px)}}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import te, { useState as ne, useEffect as oe } from "react";
|
|
2
|
-
var
|
|
2
|
+
var h = { exports: {} }, R = {};
|
|
3
3
|
/**
|
|
4
4
|
* @license React
|
|
5
5
|
* react-jsx-runtime.production.js
|
|
@@ -9,29 +9,29 @@ var b = { exports: {} }, E = {};
|
|
|
9
9
|
* This source code is licensed under the MIT license found in the
|
|
10
10
|
* LICENSE file in the root directory of this source tree.
|
|
11
11
|
*/
|
|
12
|
-
var
|
|
12
|
+
var M;
|
|
13
13
|
function ae() {
|
|
14
|
-
if (
|
|
15
|
-
|
|
16
|
-
var t = Symbol.for("react.transitional.element"),
|
|
17
|
-
function
|
|
14
|
+
if (M) return R;
|
|
15
|
+
M = 1;
|
|
16
|
+
var t = Symbol.for("react.transitional.element"), n = Symbol.for("react.fragment");
|
|
17
|
+
function i(c, u, f) {
|
|
18
18
|
var d = null;
|
|
19
|
-
if (
|
|
20
|
-
|
|
19
|
+
if (f !== void 0 && (d = "" + f), u.key !== void 0 && (d = "" + u.key), "key" in u) {
|
|
20
|
+
f = {};
|
|
21
21
|
for (var m in u)
|
|
22
|
-
m !== "key" && (
|
|
23
|
-
} else
|
|
24
|
-
return u =
|
|
22
|
+
m !== "key" && (f[m] = u[m]);
|
|
23
|
+
} else f = u;
|
|
24
|
+
return u = f.ref, {
|
|
25
25
|
$$typeof: t,
|
|
26
26
|
type: c,
|
|
27
27
|
key: d,
|
|
28
28
|
ref: u !== void 0 ? u : null,
|
|
29
|
-
props:
|
|
29
|
+
props: f
|
|
30
30
|
};
|
|
31
31
|
}
|
|
32
|
-
return
|
|
32
|
+
return R.Fragment = n, R.jsx = i, R.jsxs = i, R;
|
|
33
33
|
}
|
|
34
|
-
var
|
|
34
|
+
var T = {};
|
|
35
35
|
/**
|
|
36
36
|
* @license React
|
|
37
37
|
* react-jsx-runtime.development.js
|
|
@@ -41,16 +41,16 @@ var _ = {};
|
|
|
41
41
|
* This source code is licensed under the MIT license found in the
|
|
42
42
|
* LICENSE file in the root directory of this source tree.
|
|
43
43
|
*/
|
|
44
|
-
var
|
|
44
|
+
var W;
|
|
45
45
|
function se() {
|
|
46
|
-
return
|
|
46
|
+
return W || (W = 1, process.env.NODE_ENV !== "production" && (function() {
|
|
47
47
|
function t(e) {
|
|
48
48
|
if (e == null) return null;
|
|
49
49
|
if (typeof e == "function")
|
|
50
50
|
return e.$$typeof === K ? null : e.displayName || e.name || null;
|
|
51
51
|
if (typeof e == "string") return e;
|
|
52
52
|
switch (e) {
|
|
53
|
-
case
|
|
53
|
+
case g:
|
|
54
54
|
return "Fragment";
|
|
55
55
|
case V:
|
|
56
56
|
return "Profiler";
|
|
@@ -78,7 +78,7 @@ function se() {
|
|
|
78
78
|
return e = e.displayName, e || (e = r.displayName || r.name || "", e = e !== "" ? "ForwardRef(" + e + ")" : "ForwardRef"), e;
|
|
79
79
|
case Z:
|
|
80
80
|
return r = e.displayName || null, r !== null ? r : t(e.type) || "Memo";
|
|
81
|
-
case
|
|
81
|
+
case k:
|
|
82
82
|
r = e._payload, e = e._init;
|
|
83
83
|
try {
|
|
84
84
|
return t(e(r));
|
|
@@ -87,29 +87,29 @@ function se() {
|
|
|
87
87
|
}
|
|
88
88
|
return null;
|
|
89
89
|
}
|
|
90
|
-
function
|
|
90
|
+
function n(e) {
|
|
91
91
|
return "" + e;
|
|
92
92
|
}
|
|
93
|
-
function
|
|
93
|
+
function i(e) {
|
|
94
94
|
try {
|
|
95
|
-
|
|
95
|
+
n(e);
|
|
96
96
|
var r = !1;
|
|
97
97
|
} catch {
|
|
98
98
|
r = !0;
|
|
99
99
|
}
|
|
100
100
|
if (r) {
|
|
101
101
|
r = console;
|
|
102
|
-
var
|
|
103
|
-
return
|
|
102
|
+
var o = r.error, a = typeof Symbol == "function" && Symbol.toStringTag && e[Symbol.toStringTag] || e.constructor.name || "Object";
|
|
103
|
+
return o.call(
|
|
104
104
|
r,
|
|
105
105
|
"The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",
|
|
106
|
-
|
|
107
|
-
),
|
|
106
|
+
a
|
|
107
|
+
), n(e);
|
|
108
108
|
}
|
|
109
109
|
}
|
|
110
110
|
function c(e) {
|
|
111
|
-
if (e ===
|
|
112
|
-
if (typeof e == "object" && e !== null && e.$$typeof ===
|
|
111
|
+
if (e === g) return "<>";
|
|
112
|
+
if (typeof e == "object" && e !== null && e.$$typeof === k)
|
|
113
113
|
return "<...>";
|
|
114
114
|
try {
|
|
115
115
|
var r = t(e);
|
|
@@ -119,48 +119,48 @@ function se() {
|
|
|
119
119
|
}
|
|
120
120
|
}
|
|
121
121
|
function u() {
|
|
122
|
-
var e =
|
|
122
|
+
var e = j.A;
|
|
123
123
|
return e === null ? null : e.getOwner();
|
|
124
124
|
}
|
|
125
|
-
function
|
|
125
|
+
function f() {
|
|
126
126
|
return Error("react-stack-top-frame");
|
|
127
127
|
}
|
|
128
128
|
function d(e) {
|
|
129
|
-
if (
|
|
129
|
+
if (Y.call(e, "key")) {
|
|
130
130
|
var r = Object.getOwnPropertyDescriptor(e, "key").get;
|
|
131
131
|
if (r && r.isReactWarning) return !1;
|
|
132
132
|
}
|
|
133
133
|
return e.key !== void 0;
|
|
134
134
|
}
|
|
135
135
|
function m(e, r) {
|
|
136
|
-
function
|
|
137
|
-
|
|
136
|
+
function o() {
|
|
137
|
+
I || (I = !0, console.error(
|
|
138
138
|
"%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",
|
|
139
139
|
r
|
|
140
140
|
));
|
|
141
141
|
}
|
|
142
|
-
|
|
143
|
-
get:
|
|
142
|
+
o.isReactWarning = !0, Object.defineProperty(e, "key", {
|
|
143
|
+
get: o,
|
|
144
144
|
configurable: !0
|
|
145
145
|
});
|
|
146
146
|
}
|
|
147
|
-
function
|
|
147
|
+
function v() {
|
|
148
148
|
var e = t(this.type);
|
|
149
|
-
return
|
|
149
|
+
return $[e] || ($[e] = !0, console.error(
|
|
150
150
|
"Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release."
|
|
151
151
|
)), e = this.props.ref, e !== void 0 ? e : null;
|
|
152
152
|
}
|
|
153
|
-
function
|
|
154
|
-
var
|
|
153
|
+
function E(e, r, o, a, w, A) {
|
|
154
|
+
var s = o.ref;
|
|
155
155
|
return e = {
|
|
156
|
-
$$typeof:
|
|
156
|
+
$$typeof: C,
|
|
157
157
|
type: e,
|
|
158
158
|
key: r,
|
|
159
|
-
props:
|
|
160
|
-
_owner:
|
|
161
|
-
}, (
|
|
159
|
+
props: o,
|
|
160
|
+
_owner: a
|
|
161
|
+
}, (s !== void 0 ? s : null) !== null ? Object.defineProperty(e, "ref", {
|
|
162
162
|
enumerable: !1,
|
|
163
|
-
get:
|
|
163
|
+
get: v
|
|
164
164
|
}) : Object.defineProperty(e, "ref", { enumerable: !1, value: null }), e._store = {}, Object.defineProperty(e._store, "validated", {
|
|
165
165
|
configurable: !1,
|
|
166
166
|
enumerable: !1,
|
|
@@ -175,109 +175,109 @@ function se() {
|
|
|
175
175
|
configurable: !1,
|
|
176
176
|
enumerable: !1,
|
|
177
177
|
writable: !0,
|
|
178
|
-
value:
|
|
178
|
+
value: w
|
|
179
179
|
}), Object.defineProperty(e, "_debugTask", {
|
|
180
180
|
configurable: !1,
|
|
181
181
|
enumerable: !1,
|
|
182
182
|
writable: !0,
|
|
183
|
-
value:
|
|
183
|
+
value: A
|
|
184
184
|
}), Object.freeze && (Object.freeze(e.props), Object.freeze(e)), e;
|
|
185
185
|
}
|
|
186
|
-
function y(e, r,
|
|
187
|
-
var
|
|
188
|
-
if (
|
|
189
|
-
if (
|
|
190
|
-
if (ee(
|
|
191
|
-
for (
|
|
192
|
-
|
|
193
|
-
Object.freeze && Object.freeze(
|
|
186
|
+
function y(e, r, o, a, w, A) {
|
|
187
|
+
var s = r.children;
|
|
188
|
+
if (s !== void 0)
|
|
189
|
+
if (a)
|
|
190
|
+
if (ee(s)) {
|
|
191
|
+
for (a = 0; a < s.length; a++)
|
|
192
|
+
P(s[a]);
|
|
193
|
+
Object.freeze && Object.freeze(s);
|
|
194
194
|
} else
|
|
195
195
|
console.error(
|
|
196
196
|
"React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead."
|
|
197
197
|
);
|
|
198
|
-
else
|
|
199
|
-
if (
|
|
200
|
-
|
|
201
|
-
var
|
|
198
|
+
else P(s);
|
|
199
|
+
if (Y.call(r, "key")) {
|
|
200
|
+
s = t(e);
|
|
201
|
+
var p = Object.keys(r).filter(function(re) {
|
|
202
202
|
return re !== "key";
|
|
203
203
|
});
|
|
204
|
-
|
|
204
|
+
a = 0 < p.length ? "{key: someKey, " + p.join(": ..., ") + ": ...}" : "{key: someKey}", D[s + a] || (p = 0 < p.length ? "{" + p.join(": ..., ") + ": ...}" : "{}", console.error(
|
|
205
205
|
`A props object containing a "key" prop is being spread into JSX:
|
|
206
206
|
let props = %s;
|
|
207
207
|
<%s {...props} />
|
|
208
208
|
React keys must be passed directly to JSX without using spread:
|
|
209
209
|
let props = %s;
|
|
210
210
|
<%s key={someKey} {...props} />`,
|
|
211
|
-
o,
|
|
212
211
|
a,
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
212
|
+
s,
|
|
213
|
+
p,
|
|
214
|
+
s
|
|
215
|
+
), D[s + a] = !0);
|
|
216
216
|
}
|
|
217
|
-
if (
|
|
218
|
-
|
|
219
|
-
for (var
|
|
220
|
-
|
|
221
|
-
} else
|
|
222
|
-
return
|
|
223
|
-
|
|
217
|
+
if (s = null, o !== void 0 && (i(o), s = "" + o), d(r) && (i(r.key), s = "" + r.key), "key" in r) {
|
|
218
|
+
o = {};
|
|
219
|
+
for (var S in r)
|
|
220
|
+
S !== "key" && (o[S] = r[S]);
|
|
221
|
+
} else o = r;
|
|
222
|
+
return s && m(
|
|
223
|
+
o,
|
|
224
224
|
typeof e == "function" ? e.displayName || e.name || "Unknown" : e
|
|
225
|
-
),
|
|
225
|
+
), E(
|
|
226
226
|
e,
|
|
227
|
-
|
|
228
|
-
|
|
227
|
+
s,
|
|
228
|
+
o,
|
|
229
229
|
u(),
|
|
230
|
-
|
|
231
|
-
|
|
230
|
+
w,
|
|
231
|
+
A
|
|
232
232
|
);
|
|
233
233
|
}
|
|
234
|
-
function
|
|
235
|
-
|
|
234
|
+
function P(e) {
|
|
235
|
+
N(e) ? e._store && (e._store.validated = 1) : typeof e == "object" && e !== null && e.$$typeof === k && (e._payload.status === "fulfilled" ? N(e._payload.value) && e._payload.value._store && (e._payload.value._store.validated = 1) : e._store && (e._store.validated = 1));
|
|
236
236
|
}
|
|
237
|
-
function
|
|
238
|
-
return typeof e == "object" && e !== null && e.$$typeof ===
|
|
237
|
+
function N(e) {
|
|
238
|
+
return typeof e == "object" && e !== null && e.$$typeof === C;
|
|
239
239
|
}
|
|
240
|
-
var
|
|
240
|
+
var x = te, C = Symbol.for("react.transitional.element"), q = Symbol.for("react.portal"), g = Symbol.for("react.fragment"), J = Symbol.for("react.strict_mode"), V = Symbol.for("react.profiler"), z = Symbol.for("react.consumer"), G = Symbol.for("react.context"), B = Symbol.for("react.forward_ref"), X = Symbol.for("react.suspense"), H = Symbol.for("react.suspense_list"), Z = Symbol.for("react.memo"), k = Symbol.for("react.lazy"), Q = Symbol.for("react.activity"), K = Symbol.for("react.client.reference"), j = x.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, Y = Object.prototype.hasOwnProperty, ee = Array.isArray, O = console.createTask ? console.createTask : function() {
|
|
241
241
|
return null;
|
|
242
242
|
};
|
|
243
|
-
|
|
243
|
+
x = {
|
|
244
244
|
react_stack_bottom_frame: function(e) {
|
|
245
245
|
return e();
|
|
246
246
|
}
|
|
247
247
|
};
|
|
248
|
-
var
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
)(),
|
|
252
|
-
|
|
253
|
-
var
|
|
248
|
+
var I, $ = {}, L = x.react_stack_bottom_frame.bind(
|
|
249
|
+
x,
|
|
250
|
+
f
|
|
251
|
+
)(), F = O(c(f)), D = {};
|
|
252
|
+
T.Fragment = g, T.jsx = function(e, r, o) {
|
|
253
|
+
var a = 1e4 > j.recentlyCreatedOwnerStacks++;
|
|
254
254
|
return y(
|
|
255
255
|
e,
|
|
256
256
|
r,
|
|
257
|
-
|
|
257
|
+
o,
|
|
258
258
|
!1,
|
|
259
|
-
|
|
260
|
-
|
|
259
|
+
a ? Error("react-stack-top-frame") : L,
|
|
260
|
+
a ? O(c(e)) : F
|
|
261
261
|
);
|
|
262
|
-
},
|
|
263
|
-
var
|
|
262
|
+
}, T.jsxs = function(e, r, o) {
|
|
263
|
+
var a = 1e4 > j.recentlyCreatedOwnerStacks++;
|
|
264
264
|
return y(
|
|
265
265
|
e,
|
|
266
266
|
r,
|
|
267
|
-
|
|
267
|
+
o,
|
|
268
268
|
!0,
|
|
269
|
-
|
|
270
|
-
|
|
269
|
+
a ? Error("react-stack-top-frame") : L,
|
|
270
|
+
a ? O(c(e)) : F
|
|
271
271
|
);
|
|
272
272
|
};
|
|
273
|
-
})()),
|
|
273
|
+
})()), T;
|
|
274
274
|
}
|
|
275
|
-
var
|
|
275
|
+
var U;
|
|
276
276
|
function le() {
|
|
277
|
-
return
|
|
277
|
+
return U || (U = 1, process.env.NODE_ENV === "production" ? h.exports = ae() : h.exports = se()), h.exports;
|
|
278
278
|
}
|
|
279
|
-
var
|
|
280
|
-
const ce = ({ size: t = 24, strokeWidth:
|
|
279
|
+
var l = le();
|
|
280
|
+
const ce = ({ size: t = 24, strokeWidth: n = 2 }) => /* @__PURE__ */ l.jsxs(
|
|
281
281
|
"svg",
|
|
282
282
|
{
|
|
283
283
|
xmlns: "http://www.w3.org/2000/svg",
|
|
@@ -286,15 +286,15 @@ const ce = ({ size: t = 24, strokeWidth: l = 2 }) => /* @__PURE__ */ s.jsxs(
|
|
|
286
286
|
viewBox: "0 0 24 24",
|
|
287
287
|
fill: "none",
|
|
288
288
|
stroke: "currentColor",
|
|
289
|
-
strokeWidth:
|
|
289
|
+
strokeWidth: n,
|
|
290
290
|
strokeLinecap: "round",
|
|
291
291
|
strokeLinejoin: "round",
|
|
292
292
|
children: [
|
|
293
|
-
/* @__PURE__ */
|
|
294
|
-
/* @__PURE__ */
|
|
293
|
+
/* @__PURE__ */ l.jsx("circle", { cx: 12, cy: 12, r: 10 }),
|
|
294
|
+
/* @__PURE__ */ l.jsx("path", { d: "m9 12 2 2 4-4" })
|
|
295
295
|
]
|
|
296
296
|
}
|
|
297
|
-
), ie = ({ size: t = 24, strokeWidth:
|
|
297
|
+
), ie = ({ size: t = 24, strokeWidth: n = 2 }) => /* @__PURE__ */ l.jsxs(
|
|
298
298
|
"svg",
|
|
299
299
|
{
|
|
300
300
|
xmlns: "http://www.w3.org/2000/svg",
|
|
@@ -303,17 +303,17 @@ const ce = ({ size: t = 24, strokeWidth: l = 2 }) => /* @__PURE__ */ s.jsxs(
|
|
|
303
303
|
viewBox: "0 0 24 24",
|
|
304
304
|
fill: "none",
|
|
305
305
|
stroke: "currentColor",
|
|
306
|
-
strokeWidth:
|
|
306
|
+
strokeWidth: n,
|
|
307
307
|
strokeLinecap: "round",
|
|
308
308
|
strokeLinejoin: "round",
|
|
309
309
|
className: "lucide lucide-circle-x-icon lucide-circle-x",
|
|
310
310
|
children: [
|
|
311
|
-
/* @__PURE__ */
|
|
312
|
-
/* @__PURE__ */
|
|
313
|
-
/* @__PURE__ */
|
|
311
|
+
/* @__PURE__ */ l.jsx("circle", { cx: 12, cy: 12, r: 10 }),
|
|
312
|
+
/* @__PURE__ */ l.jsx("path", { d: "m15 9-6 6" }),
|
|
313
|
+
/* @__PURE__ */ l.jsx("path", { d: "m9 9 6 6" })
|
|
314
314
|
]
|
|
315
315
|
}
|
|
316
|
-
), ue = ({ size: t = 24, strokeWidth:
|
|
316
|
+
), ue = ({ size: t = 24, strokeWidth: n = 2 }) => /* @__PURE__ */ l.jsxs(
|
|
317
317
|
"svg",
|
|
318
318
|
{
|
|
319
319
|
xmlns: "http://www.w3.org/2000/svg",
|
|
@@ -322,60 +322,69 @@ const ce = ({ size: t = 24, strokeWidth: l = 2 }) => /* @__PURE__ */ s.jsxs(
|
|
|
322
322
|
viewBox: "0 0 24 24",
|
|
323
323
|
fill: "none",
|
|
324
324
|
stroke: "currentColor",
|
|
325
|
-
strokeWidth:
|
|
325
|
+
strokeWidth: n,
|
|
326
326
|
strokeLinecap: "round",
|
|
327
327
|
strokeLinejoin: "round",
|
|
328
328
|
className: "lucide lucide-triangle-alert-icon lucide-triangle-alert",
|
|
329
329
|
children: [
|
|
330
|
-
/* @__PURE__ */
|
|
331
|
-
/* @__PURE__ */
|
|
332
|
-
/* @__PURE__ */
|
|
330
|
+
/* @__PURE__ */ l.jsx("path", { d: "m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3" }),
|
|
331
|
+
/* @__PURE__ */ l.jsx("path", { d: "M12 9v4" }),
|
|
332
|
+
/* @__PURE__ */ l.jsx("path", { d: "M12 17h.01" })
|
|
333
333
|
]
|
|
334
334
|
}
|
|
335
335
|
);
|
|
336
336
|
function fe(t) {
|
|
337
337
|
switch (t) {
|
|
338
338
|
case "success":
|
|
339
|
-
return /* @__PURE__ */
|
|
339
|
+
return /* @__PURE__ */ l.jsx(ce, { size: 20 });
|
|
340
340
|
case "error":
|
|
341
|
-
return /* @__PURE__ */
|
|
341
|
+
return /* @__PURE__ */ l.jsx(ie, { size: 20 });
|
|
342
342
|
case "warning":
|
|
343
|
-
return /* @__PURE__ */
|
|
343
|
+
return /* @__PURE__ */ l.jsx(ue, { size: 18 });
|
|
344
344
|
default:
|
|
345
345
|
return null;
|
|
346
346
|
}
|
|
347
347
|
}
|
|
348
|
-
function de({ message: t, type:
|
|
349
|
-
return /* @__PURE__ */
|
|
350
|
-
|
|
348
|
+
function de({ message: t, type: n = "default", icon: i, leaving: c }) {
|
|
349
|
+
return /* @__PURE__ */ l.jsxs("div", { className: `toast toast-${n} ${c ? "toast-exit" : "toast-enter"}`, children: [
|
|
350
|
+
i,
|
|
351
351
|
t
|
|
352
352
|
] });
|
|
353
353
|
}
|
|
354
|
-
let
|
|
355
|
-
function ve({
|
|
356
|
-
|
|
357
|
-
}) {
|
|
358
|
-
const [l, f] = ne([]);
|
|
354
|
+
let b;
|
|
355
|
+
function ve({ autoClose: t = 3e3 }) {
|
|
356
|
+
const [n, i] = ne([]);
|
|
359
357
|
return oe(() => {
|
|
360
|
-
|
|
361
|
-
const
|
|
362
|
-
|
|
363
|
-
|
|
364
|
-
(
|
|
358
|
+
b = (c, u = "default", f) => {
|
|
359
|
+
const d = Date.now(), m = f || t;
|
|
360
|
+
i((v) => [...v, { id: d, message: c, type: u, leaving: !1 }]), setTimeout(() => {
|
|
361
|
+
i(
|
|
362
|
+
(v) => v.map(
|
|
363
|
+
(E) => E.id === d ? { ...E, leaving: !0 } : E
|
|
364
|
+
)
|
|
365
365
|
), setTimeout(() => {
|
|
366
|
-
|
|
366
|
+
i((v) => v.filter((E) => E.id !== d));
|
|
367
367
|
}, 400);
|
|
368
|
-
},
|
|
368
|
+
}, m);
|
|
369
369
|
};
|
|
370
|
-
}, []), /* @__PURE__ */
|
|
370
|
+
}, [t]), /* @__PURE__ */ l.jsx("div", { className: "toast-container", children: n.map((c) => /* @__PURE__ */ l.jsx(
|
|
371
|
+
de,
|
|
372
|
+
{
|
|
373
|
+
message: c.message,
|
|
374
|
+
type: c.type,
|
|
375
|
+
icon: fe(c.type),
|
|
376
|
+
leaving: c.leaving
|
|
377
|
+
},
|
|
378
|
+
c.id
|
|
379
|
+
)) });
|
|
371
380
|
}
|
|
372
|
-
function
|
|
373
|
-
|
|
381
|
+
function _(t, n = "default", i) {
|
|
382
|
+
typeof n == "number" ? b && b(t, "default", n) : b && b(t, n, i);
|
|
374
383
|
}
|
|
375
|
-
|
|
376
|
-
|
|
377
|
-
|
|
384
|
+
_.success = (t, n) => _(t, "success", n);
|
|
385
|
+
_.error = (t, n) => _(t, "error", n);
|
|
386
|
+
_.warning = (t, n) => _(t, "warning", n);
|
|
378
387
|
export {
|
|
379
388
|
ve as ToastContainer,
|
|
380
|
-
|
|
389
|
+
_ as toast
|
|
381
390
|
};
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
(function(p
|
|
1
|
+
(function(m,p){typeof exports=="object"&&typeof module<"u"?p(exports,require("react")):typeof define=="function"&&define.amd?define(["exports","react"],p):(m=typeof globalThis<"u"?globalThis:m||self,p(m.ReactToastMsg={},m.React))})(this,(function(m,p){"use strict";var w={exports:{}},b={};/**
|
|
2
2
|
* @license React
|
|
3
3
|
* react-jsx-runtime.production.js
|
|
4
4
|
*
|
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
*
|
|
7
7
|
* This source code is licensed under the MIT license found in the
|
|
8
8
|
* LICENSE file in the root directory of this source tree.
|
|
9
|
-
*/var
|
|
9
|
+
*/var N;function z(){if(N)return b;N=1;var t=Symbol.for("react.transitional.element"),n=Symbol.for("react.fragment");function l(i,u,f){var d=null;if(f!==void 0&&(d=""+f),u.key!==void 0&&(d=""+u.key),"key"in u){f={};for(var E in u)E!=="key"&&(f[E]=u[E])}else f=u;return u=f.ref,{$$typeof:t,type:i,key:d,ref:u!==void 0?u:null,props:f}}return b.Fragment=n,b.jsx=l,b.jsxs=l,b}var x={};/**
|
|
10
10
|
* @license React
|
|
11
11
|
* react-jsx-runtime.development.js
|
|
12
12
|
*
|
|
@@ -14,9 +14,9 @@
|
|
|
14
14
|
*
|
|
15
15
|
* This source code is licensed under the MIT license found in the
|
|
16
16
|
* LICENSE file in the root directory of this source tree.
|
|
17
|
-
*/var
|
|
17
|
+
*/var C;function q(){return C||(C=1,process.env.NODE_ENV!=="production"&&(function(){function t(e){if(e==null)return null;if(typeof e=="function")return e.$$typeof===ue?null:e.displayName||e.name||null;if(typeof e=="string")return e;switch(e){case k:return"Fragment";case te:return"Profiler";case re:return"StrictMode";case se:return"Suspense";case ce:return"SuspenseList";case le:return"Activity"}if(typeof e=="object")switch(typeof e.tag=="number"&&console.error("Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."),e.$$typeof){case ee:return"Portal";case oe:return e.displayName||"Context";case ne:return(e._context.displayName||"Context")+".Consumer";case ae:var r=e.render;return e=e.displayName,e||(e=r.displayName||r.name||"",e=e!==""?"ForwardRef("+e+")":"ForwardRef"),e;case ie:return r=e.displayName||null,r!==null?r:t(e.type)||"Memo";case y:r=e._payload,e=e._init;try{return t(e(r))}catch{}}return null}function n(e){return""+e}function l(e){try{n(e);var r=!1}catch{r=!0}if(r){r=console;var o=r.error,a=typeof Symbol=="function"&&Symbol.toStringTag&&e[Symbol.toStringTag]||e.constructor.name||"Object";return o.call(r,"The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",a),n(e)}}function i(e){if(e===k)return"<>";if(typeof e=="object"&&e!==null&&e.$$typeof===y)return"<...>";try{var r=t(e);return r?"<"+r+">":"<...>"}catch{return"<...>"}}function u(){var e=O.A;return e===null?null:e.getOwner()}function f(){return Error("react-stack-top-frame")}function d(e){if(D.call(e,"key")){var r=Object.getOwnPropertyDescriptor(e,"key").get;if(r&&r.isReactWarning)return!1}return e.key!==void 0}function E(e,r){function o(){$||($=!0,console.error("%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",r))}o.isReactWarning=!0,Object.defineProperty(e,"key",{get:o,configurable:!0})}function _(){var e=t(this.type);return W[e]||(W[e]=!0,console.error("Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release.")),e=this.props.ref,e!==void 0?e:null}function T(e,r,o,a,j,A){var s=o.ref;return e={$$typeof:M,type:e,key:r,props:o,_owner:a},(s!==void 0?s:null)!==null?Object.defineProperty(e,"ref",{enumerable:!1,get:_}):Object.defineProperty(e,"ref",{enumerable:!1,value:null}),e._store={},Object.defineProperty(e._store,"validated",{configurable:!1,enumerable:!1,writable:!0,value:0}),Object.defineProperty(e,"_debugInfo",{configurable:!1,enumerable:!1,writable:!0,value:null}),Object.defineProperty(e,"_debugStack",{configurable:!1,enumerable:!1,writable:!0,value:j}),Object.defineProperty(e,"_debugTask",{configurable:!1,enumerable:!1,writable:!0,value:A}),Object.freeze&&(Object.freeze(e.props),Object.freeze(e)),e}function I(e,r,o,a,j,A){var s=r.children;if(s!==void 0)if(a)if(fe(s)){for(a=0;a<s.length;a++)L(s[a]);Object.freeze&&Object.freeze(s)}else console.error("React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead.");else L(s);if(D.call(r,"key")){s=t(e);var R=Object.keys(r).filter(function(de){return de!=="key"});a=0<R.length?"{key: someKey, "+R.join(": ..., ")+": ...}":"{key: someKey}",V[s+a]||(R=0<R.length?"{"+R.join(": ..., ")+": ...}":"{}",console.error(`A props object containing a "key" prop is being spread into JSX:
|
|
18
18
|
let props = %s;
|
|
19
19
|
<%s {...props} />
|
|
20
20
|
React keys must be passed directly to JSX without using spread:
|
|
21
21
|
let props = %s;
|
|
22
|
-
<%s key={someKey} {...props} />`,
|
|
22
|
+
<%s key={someKey} {...props} />`,a,s,R,s),V[s+a]=!0)}if(s=null,o!==void 0&&(l(o),s=""+o),d(r)&&(l(r.key),s=""+r.key),"key"in r){o={};for(var P in r)P!=="key"&&(o[P]=r[P])}else o=r;return s&&E(o,typeof e=="function"?e.displayName||e.name||"Unknown":e),T(e,s,o,u(),j,A)}function L(e){F(e)?e._store&&(e._store.validated=1):typeof e=="object"&&e!==null&&e.$$typeof===y&&(e._payload.status==="fulfilled"?F(e._payload.value)&&e._payload.value._store&&(e._payload.value._store.validated=1):e._store&&(e._store.validated=1))}function F(e){return typeof e=="object"&&e!==null&&e.$$typeof===M}var g=p,M=Symbol.for("react.transitional.element"),ee=Symbol.for("react.portal"),k=Symbol.for("react.fragment"),re=Symbol.for("react.strict_mode"),te=Symbol.for("react.profiler"),ne=Symbol.for("react.consumer"),oe=Symbol.for("react.context"),ae=Symbol.for("react.forward_ref"),se=Symbol.for("react.suspense"),ce=Symbol.for("react.suspense_list"),ie=Symbol.for("react.memo"),y=Symbol.for("react.lazy"),le=Symbol.for("react.activity"),ue=Symbol.for("react.client.reference"),O=g.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,D=Object.prototype.hasOwnProperty,fe=Array.isArray,S=console.createTask?console.createTask:function(){return null};g={react_stack_bottom_frame:function(e){return e()}};var $,W={},U=g.react_stack_bottom_frame.bind(g,f)(),J=S(i(f)),V={};x.Fragment=k,x.jsx=function(e,r,o){var a=1e4>O.recentlyCreatedOwnerStacks++;return I(e,r,o,!1,a?Error("react-stack-top-frame"):U,a?S(i(e)):J)},x.jsxs=function(e,r,o){var a=1e4>O.recentlyCreatedOwnerStacks++;return I(e,r,o,!0,a?Error("react-stack-top-frame"):U,a?S(i(e)):J)}})()),x}var Y;function G(){return Y||(Y=1,process.env.NODE_ENV==="production"?w.exports=z():w.exports=q()),w.exports}var c=G();const B=({size:t=24,strokeWidth:n=2})=>c.jsxs("svg",{xmlns:"http://www.w3.org/2000/svg",width:t,height:t,viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:n,strokeLinecap:"round",strokeLinejoin:"round",children:[c.jsx("circle",{cx:12,cy:12,r:10}),c.jsx("path",{d:"m9 12 2 2 4-4"})]}),X=({size:t=24,strokeWidth:n=2})=>c.jsxs("svg",{xmlns:"http://www.w3.org/2000/svg",width:t,height:t,viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:n,strokeLinecap:"round",strokeLinejoin:"round",className:"lucide lucide-circle-x-icon lucide-circle-x",children:[c.jsx("circle",{cx:12,cy:12,r:10}),c.jsx("path",{d:"m15 9-6 6"}),c.jsx("path",{d:"m9 9 6 6"})]}),H=({size:t=24,strokeWidth:n=2})=>c.jsxs("svg",{xmlns:"http://www.w3.org/2000/svg",width:t,height:t,viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:n,strokeLinecap:"round",strokeLinejoin:"round",className:"lucide lucide-triangle-alert-icon lucide-triangle-alert",children:[c.jsx("path",{d:"m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3"}),c.jsx("path",{d:"M12 9v4"}),c.jsx("path",{d:"M12 17h.01"})]});function Z(t){switch(t){case"success":return c.jsx(B,{size:20});case"error":return c.jsx(X,{size:20});case"warning":return c.jsx(H,{size:18});default:return null}}function Q({message:t,type:n="default",icon:l,leaving:i}){return c.jsxs("div",{className:`toast toast-${n} ${i?"toast-exit":"toast-enter"}`,children:[l,t]})}let h;function K({autoClose:t=3e3}){const[n,l]=p.useState([]);return p.useEffect(()=>{h=(i,u="default",f)=>{const d=Date.now(),E=f||t;l(_=>[..._,{id:d,message:i,type:u,leaving:!1}]),setTimeout(()=>{l(_=>_.map(T=>T.id===d?{...T,leaving:!0}:T)),setTimeout(()=>{l(_=>_.filter(T=>T.id!==d))},400)},E)}},[t]),c.jsx("div",{className:"toast-container",children:n.map(i=>c.jsx(Q,{message:i.message,type:i.type,icon:Z(i.type),leaving:i.leaving},i.id))})}function v(t,n="default",l){typeof n=="number"?h&&h(t,"default",n):h&&h(t,n,l)}v.success=(t,n)=>v(t,"success",n),v.error=(t,n)=>v(t,"error",n),v.warning=(t,n)=>v(t,"warning",n),m.ToastContainer=K,m.toast=v,Object.defineProperty(m,Symbol.toStringTag,{value:"Module"})}));
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "react-toast-msg",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "2.0.0",
|
|
4
4
|
"description": "A lightweight, customizable React toast notification library with zero-config and fast setup.",
|
|
5
5
|
"main": "dist/react-toast-msg.umd.js",
|
|
6
6
|
"module": "dist/react-toast-msg.es.js",
|